Adding An Underline On Words To Add Emphasis

written by: Dimitri
Last Updated: November 6, 2021

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!

Leave a Reply

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

our blog.

Related Blogs You May Enjoy

A Webmasters Guide to Integrating SEO With Web Design

Bringing SEO and SERP optimization into line with a quality interface is the Holy Grail of web design. This means that your website shouldn’t only look fantastic…
Read More

5 Step To Take Before Launching an E-Commerce Store

We all know how important E-Commerce websites are, especially with COVID-19 preventing people from purchasing items inside stores. For this post, we have decided to create an…
Read More

Making Elements Sticky With CSS - No Plugin Necessary

We have had a few people ask us how we managed to get our sidebar to "stick" as your scroll down the page. So we decided to…
Read More