How to add an underline to website text should be covered in any intro to web development course. The old-fashioned HTML way uses a now-deprecated tag:
<u>This will appear underlined!</u>
Modern approaches use CSS to define such a style:
<p style="text-decoration: underline;">This will appear underlined!</p>
Even better, properly written code will separate the inline styles, like so:
<style>
.underlined-text{
text-decoration: underline;
}
</style>
<p class="underlined-text">This will appear underlined!</p>
For hyperlink text, I might want to hide the underline when a user mouses over it. That’s easy with the “hover” pseudo-class:
<style>
a.hyperlink-text{
text-decoration: underline;
}
a.hyperlink-text:hover{
text-decoration: none;
}
</style>
<a class="hyperlink-text">This will appear underlined!</a>
But, suppose I want to have that underline to become thicker instead of disappearing. That will require an advanced, super-secret CSS technique. To make it work, we will utilize box-shadow.
In the world of cascading style sheets, the box-shadow property adds a shadow effect around any HTML element. The shadow is described by its offsets, relative to the element. Leveraging this, we can create a shadow that looks like an underline. On hover, we can adjust the settings to change its appearance:
<style>
a.hyperlink-text{
text-decoration: none;
box-shadow: inset 0 -1px 0 rgb(15 15 15);
}
a.hyperlink-text:hover{
-webkit-box-shadow: inset 0 0 0 rgb(0 0 0 / 0%), 0 3px 0 rgb(0 0 0);
box-shadow: inset 0 0 0 rgb(0 0 0 / 0%), 0 3px 0 rgb(0 0 0);
}
</style>
<a class="hyperlink-text">This will appear underlined!</a>
Point your cursor over any of the hyperlinks in this post to see what it looks like. Experiment with the above code to make it your own.