How to Style Links without Underlining a Specific Span Element?

Styling Links without Underlining a Specific Element

When attempting to style links with an underline, it's common to encounter situations where you may want to exclude a particular element within the link from being underlined. In this case, you've faced a challenge in applying specific styles to element #myspan without affecting the underline on the rest of the link.

To resolve this issue, consider the following solution:

Modify the CSS declaration for element #myspan and set its display property to "inline-block". This change effectively makes #myspan occupy its own space within the link, separating it from the text that is being underlined.

Here's the updated CSS:

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display: inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

You can also refer to the following HTML code:

<a href="#">A link <span></span></a>

By making these changes, element #myspan will no longer be affected by the underline applied to the link, allowing you to style it independently without compromising the overall appearance of the link.

The above is the detailed content of How to Style Links without Underlining a Specific Span Element?. For more information, please follow other related articles on the PHP Chinese website!