Unique Ways To Style Text Links with CSS

@sam • 11,669

Tip the AuthorCopy linkTweet this

Apr 06.2022

Is anyone else a little bored with the standard bolded & underlined text links? I know I am. Below are 5 unique ways to style text links with CSS that catch a reader’s attention and create a little more intrigue within a paragraph.

Offset Underline

This style is similar to an underline but with a little extra padding (in my opinion, making it significantly easier to read) + control over the border thickness.

Example

The Code

.sm-offset-border a{
 color: #439191;
 font-weight: bold;
 border-bottom: 2px solid #439191;
 padding-bottom: 3px;
}

Offset Dotted Underline

A subtle dotted border that’s a little softer than a solid underline.

Example

The Code

.sm-offset-dotted-underline a{
 color: #439191;
 border-bottom: 1px dotted #439191;
 padding-bottom: 3px;
}

Wavy

This is a great option if you want to have a little fun on a project, something not too serious.

Example

The Code

.sm-wavy a{
 color: #439191;
 text-decoration: underline;
 text-decoration-color: #43919180;
 text-decoration-style: wavy;
 text-underline-offset: 5px;
 text-decoration-thickness: 1px;
}

NOTE: If you prefer to keep the wave the same color as the link, you can omit the text-decoration-color property.

Highlight

Simple and easy to read, using a more opaque version of the link color.

Example

The Code

.sm-highlight a{
 color: #439191;
 background: #43919110;
}

NOTE: To adjust the opacity of the background update the last 2 numbers in the hex code (currently set to 10%).

Half-Highlight

Not quite a full highlight but just enough to add a little intrigue.

Example

The Code

.sm-half-highlight a{
 color: #439191;
 background: linear-gradient(180deg, rgba(255,255,255,0) 50%, #43919120 0%);
}

NOTE: You can adjust the “height” of the highlight by playing with 50%.

Final Thoughts

If you’re looking to add some subtle flair to text links on your next project, consider trying one of these.

Do you have a favorite text link style I didn’t mention here? Be sure to share it with me! DM me @hellosammunoz. 👩🏼‍💻✨