I included a link within a div and applied text-decoration: none; to the anchor tag as shown below:
Here is the CSS (SCSS) code snippet used:
&__link {
&:link,
&:visited {
text-decoration: none;
}
}
And here is the corresponding HTML code:
<div class="feature-box">
<a href="#" class="feature-box__link js--scroll-to-services">
<svg class="feature-box__icon feature-box__icon--1">
<use xlink:href="img/sprite.svg#sewage"/>
</svg>
<h3 class="heading-tertiary u-margin-bottom-small">Vee ja kanalisatsiooni-<br>süsteemide ehitus</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur.
</p>
</a>
</div>
The issue I encountered is that setting text-decoration: none property only removes the underline from the text, but the color of the text remains purple as if it has already been visited.