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="#" >Test link 1</a>
<a href="#" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
CodePudding user response:
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="#" >Test link 1</a>
<a href="#" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
CodePudding user response:
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="#" ><span >Test link 1</span></a>
<a href="#" ><span >Lorem ipsum.</span></a>
</div>