SASS link hover on span


I have the following SCSS:


        padding: 0px 5px;
		text-align: center;
		color: $brand-primary;
		font-size: 16px;
		line-height: 18px;
		display: inline-block;
		font-size: 40px;
		color: #fff;
		display: block;
		margin-top: 10px;

span  a:hover{
text-decoration: none!important;


and the following HTML:

<div class="col-sm-15 col-xs-6 service vm-divider">
<a href="website.php">Website
<span class="fa fa-code"></span></a>

I am trying to remove the text-decoration on the span hover but keep the underline on the text, but it’s not happening.

Any ideas what I have wrong?


There’s no a element inside a span element, only a span inside an a

For a start this is wrong, the a is not inside a span. The span is inside the a.
But, because the span is a child of the a, when you apply the rule to the a it applies to the whole of the a, that includes its content, ie the span.
To target only a specific part of the a’s content you will need another span around that.

<a href="website.php"><span>Website</span>
<span class="fa fa-code">9</span></a>
a:hover span {
  text-decoration: underline;
a:hover .fa {
text-decoration: none;

Please post normal CSS. NOT SCSS or SASS.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.