Thick underline effect with background color

March 2, 2021 June 11, 2021

Underline is normally used for clickable or linked text. These days underline effect is also used to highlighted normal text words in a headline. For accessibility reasons, such text should be highlighted using background color method as against normal underline or fancy wavy underline effect.

Preview: Normal Text

Lets highlight something here.

Preview: Highlighted Text

Lets highlight something here.

Step 1

Add class vc-text-8 wrapping specific words. Following would be the markup.

Lets <span class="vc-text-8">highlight</span> something here.

Step 2

Then add the following CSS code. You can customize the color (change background color) of the strikethrough line and its thickness (change height value).

.vc-text-8 {
     display: inline-block;
     position: relative;
     z-index: 10;
}
 .vc-text-8:after {
     background: #ffcb69;
     height: 12px;
     bottom: 5%;
     content: '';
     position: absolute;
     left: 0;
     width: 100%;
     z-index: -1;
}

💬 Subscribe for Free, for more CSS magic.

For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login

Leave a Comment Cancel Reply