How to Change Link Underline Color
Table of Contents
In this post, we will learn how to change the underline color of a line.
You can change the underline color of a line by using the text-decoration-color
CSS property. This allows you to have one color for the underline of a line and another color for the text.
The color of an underline will by default be the same as the color of the text. In the past, when we've wanted to change the color of the underline, we've had to use border-bottom
to simulate the underline.
However, now you can change the color of the underline directly by using the text-decoration-color
CSS property.
Here's an example of how to change the underline color of a line:
CSSp {
text-decoration: underline;
text-decoration-color: blue;
}
Try it out for yourself below:
- HTML
- CSS
Text Decoration Styling
You can style text decorations further with the following CSS properties:
text-decoration-offset
: Set the offset of the text decoration line.text-decoration-style
: Set the style of the text decoration line (dashed
,dotted
,double
,wavy
).text-decoration-thickness
: Set the thickness of the text decoration line.text-decoration-skip-ink
: Set whether the text decoration should skip over text or not.
Conclusion
We've seen how to change the underline color of a line and how to style text decorations using additional CSS properties.
Hopefully, this post has been helpful to you!
Resources
- text-decoration-color on MDN Web Docs
- text-decoration-style on MDN Web Docs
- text-decoration-thickness on MDN Web Docs
- text-decoration-skip-ink on MDN Web Docs
- Getting Started with Svelte
- Getting Started with Express
- How to Set Up Cron Jobs in Linux
- Best Visual Studio Code Extensions for 2022
- How to deploy a MySQL Server using Docker
- How to deploy a Node app using Docker
- How to Scrape the Web using Node.js and Puppeteer
- Getting Started with Handlebars.js
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Learn how to build a Slack Bot using Node.js
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue