Adding An Underline On Words To Add Emphasis

Categories:
Published On:
Reading Time:
1 Minute

When designing a website for our client Sterling Wealth Management we decided to take a modern approach and utilize underlined words to draw attention and add emphasis. An example of this would be:

Look at this underlined word

As you can see your eyes are directly focused on the word that is underlined giving you the ability to draw attention to specific parts of the page. To add this code simply place the following CSS into your stylesheet:

.underline-word {
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
.underline-word::after{
    content: '';
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0%;
    left: 0;
    background: #8c61ff;
    z-index: -1;
}
CSS

Once that is added then you simply call it into your HTML markup by using the following:

<h2>Look at this underlined <span class="underline-word">word</span></h2>
HTML, XML, Markup

If you look at the above CSS snippet, you can see several different styles being rendered, however, the one you are probably most interested in is the one regarding the color - background: #8c61ff; simply change that with any other color value and you're ready to go!

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us

When designing a website for our client Sterling Wealth Management we decided to take a modern approach and utilize underlined words to draw attention and add emphasis. An example of this would be:

Look at this underlined word

As you can see your eyes are directly focused on the word that is underlined giving you the ability to draw attention to specific parts of the page. To add this code simply place the following CSS into your stylesheet:

.underline-word {
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
.underline-word::after{
    content: '';
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0%;
    left: 0;
    background: #8c61ff;
    z-index: -1;
}
CSS

Once that is added then you simply call it into your HTML markup by using the following:

<h2>Look at this underlined <span class="underline-word">word</span></h2>
HTML, XML, Markup

If you look at the above CSS snippet, you can see several different styles being rendered, however, the one you are probably most interested in is the one regarding the color - background: #8c61ff; simply change that with any other color value and you're ready to go!

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us
Dimitri is is a full-stack developer and the founder of Sigma 1. He spends the majority of his time designing websites for customers. However, when he has a bit of free time, you can catch him on a hike or exploring the nature around Las Vegas.

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave a Reply

Your email address will not be published. Required fields are marked *