Text decoration underline on link but not on ::before?-Twitter bootstrap

Lucas
April 22, 2022
210 views
0 votes
2 Answers

How can I get the link to have a underline but the (fontawesome) icon ::before not? ::before text decoration:none; doesn’t work

.btn--tertiary {
    font-size: 16px;
    line-height: 24px;
    padding-left: 0;
    color: #007e9e;
    text-decoration: underline;
    border: 0 solid #fff;
    background-color: #fff;
    display: inline-flex !important;
}

.btn--tertiary::before {
    font-family: "Font Awesome 5 Free";
    content: "f0a9";
    margin-right: 5px;
    color: #9cc923;
}
div {
    width: 200px;
 }

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div>
<a href="#" class="btn--tertiary">Test link 1</a>
<a href="#" class="btn--tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

</div>

Answers

Using position absolute

<div>
<style>
  .btn--tertiary {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    padding-left: 15px;
    color: #007e9e;
    text-decoration: underline;
    border: 0 solid #fff;
    background-color: #fff;
    display: inline-flex !important;
  }

  .btn--tertiary::before {
    font-family: "Font Awesome 5 Free";
    content: "f0a9";
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 5px;
    color: #9cc923;
    text-decoration: none;
  }
</style>
<link
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
  rel="stylesheet"
/>
<link
  href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
  rel="stylesheet"
/>

<a href="#" class="btn--tertiary">Test link 1</a>
<a href="#" class="btn--tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>

You could remove the underline from the anchor-element. This way your font-awesome icon (which is part of the anchor-element) won’t be underlined as well. If you do want the rest of the text-underlined you could use a span-element for that.

.underline{
  text-decoration: underline;
}

.btn--tertiary {
    text-decoration: none!important;
    font-size: 16px;
    line-height: 24px;
    padding-left: 0;
    color: #007e9e;
    border: 0 solid #fff;
    background-color: #fff;
    display: inline-flex !important;
}

.btn--tertiary::before {
    font-family: "Font Awesome 5 Free";
    content: "f0a9";
    margin-right: 5px;
    color: #9cc923;
}

div {
    width: 200px;
}

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div>
  <a href="#" class="btn--tertiary"><span class="underline">Test link 1</span></a>
  <a href="#" class="btn--tertiary"><span class="underline">Lorem ipsum.</span></a>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.