To activate an underline on text, simply right-click and select "text

Question

All the anchor tags on my website have been styled with text-decoration: none.

Additionally, I have added a CSS rule based on a helpful answer:

a, a:hover, a:active, a:visited {
    text-decoration:none;
}

However, whenever I right-click on a link on my website to open the inspector element, the link suddenly becomes underlined.

Can anyone explain why this is happening?

Answer 1

Answer №1

Due to the rules of CSS specificity, the focus should not be on how to underline with a right-click.

Instead, consider what other factors may be affecting the appearance of your link when clicked (left or right).

It seems like there may be another CSS rule impacting your anchors.

Take a look at the sample code below (where the issue does not occur):

a {
  text-decoration: none;
}
#wrapper a:active {
  text-decoration: underline;
}

<span id='wrapper'>
   <a href="#">link</a>  
</span>

Answer 2

Due to the rules of CSS specificity, the focus should not be on how to underline with a right-click.

Instead, consider what other factors may be affecting the appearance of your link when clicked (left or right).

It seems like there may be another CSS rule impacting your anchors.

Take a look at the sample code below (where the issue does not occur):

a {
  text-decoration: none;
}
#wrapper a:active {
  text-decoration: underline;
}

<span id='wrapper'>
   <a href="#">link</a>  
</span>