/    Sign up×
Articles /Pin to ProfileBookmark

Unique Ways To Style Text Links with CSS

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. 👩🏼‍💻✨

CSS
×

Success!

Help @sam spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...