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\u00a0tag:<\/p>\n
<u>This will appear underlined!<\/u><\/pre>\nModern approaches use CSS to define such a style:<\/p>\n
<p style=\"text-decoration: underline;\">This will appear underlined!<\/p><\/pre>\nEven better, properly written code will separate the inline styles, like so:<\/p>\n
<style>\n.underlined-text{\n text-decoration: underline;\n}\n<\/style>\n<p class=\"underlined-text\">This will appear underlined!<\/p><\/pre>\nFor hyperlink text, I might want to hide the underline when a user mouses over it. That’s easy with the “hover” pseudo-class<\/a>:<\/p>\n
<style>\na.hyperlink-text{\n text-decoration: underline;\n}\na.hyperlink-text:hover{\n text-decoration: none;\n}\n<\/style>\n<a class=\"hyperlink-text\">This will appear underlined!<\/a>\n<\/pre>\nBut, suppose I want to have that underline to become thicker instead of disappearing. That will require an advanced, super-secret<\/strong> CSS technique. To make it work, we will utilize box-shadow<\/em><\/a>.<\/p>\n
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:<\/p>\n
<style>\na.hyperlink-text{\n text-decoration: none;\n box-shadow: inset 0 -1px 0 rgb(15 15 15);\n}\na.hyperlink-text:hover{\n -webkit-box-shadow: inset 0 0 0 rgb(0 0 0 \/ 0%), 0 3px 0 rgb(0 0 0);\n box-shadow: inset 0 0 0 rgb(0 0 0 \/ 0%), 0 3px 0 rgb(0 0 0);\n}\n<\/style>\n<a class=\"hyperlink-text\">This will appear underlined!<\/a>\n<\/pre>\nPoint 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00a0tag: <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 … <\/p>\n