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
Hi there! Isn’t this a
neat way to link something in a sentence? I agree. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellenteque nec, egestas non nisi. Nulla portitor accumsan tincidunt.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
Hi there! Isn’t this a
neat way to link something in a sentence? I agree. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellenteque nec, egestas non nisi. Nulla portitor accumsan tincidunt.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
Hi there! Isn’t this a
neat way to link something in a sentence? I agree. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellenteque nec, egestas non nisi. Nulla portitor accumsan tincidunt.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
Hi there! Isn’t this a
neat way to link something in a sentence? I agree. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellenteque nec, egestas non nisi. Nulla portitor accumsan tincidunt.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
Hi there! Isn’t this a
neat way to link something in a sentence? I agree. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellenteque nec, egestas non nisi. Nulla portitor accumsan tincidunt.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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. 👩🏼💻✨