SASS link hover on span

[toolman]

Hi,

I have the following SCSS:

.service{
		

        padding: 0px 5px;
		text-align: center;
		
		a{
		color: $brand-primary;
		font-size: 16px;
		line-height: 18px;
		display: inline-block;
		}
		
		span.fa{
		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>
</div>

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?

Thanks

[m3g4p0p]

@toolman

span a:hover

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

[SamA74]

@toolman

span a:hover{

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;
}

[ronpat]

Please post normal CSS. NOT SCSS or SASS.