CSS “underline” text part

Question

How can I "underline" text to get the same effect like you can see under "TEST"?

I tried to encapsulate TEST in a span and adding an absolute :after with position: absolute , but I think it's not the correct way and haven't been able to obtain the expected result.

Here's the HTML

 <h1 class="white hero-text"> <span class="thin">ALL THIS TEXT IS</span> <br> <span class="bold striked">A TEST</span> </h1> 

Answer 1

You said you tried with :after . That's the right solution. See snippet below. You can change the values

 .striked { position: relative } h1 { text-align: center; } .striked:after { height: 50%; width: 150%; left: -25%; background: red; content: ""; position: absolute; bottom: 0; z-index: -1 } 

 <h1 class="white hero-text"> <span class="thin">ALL THIS TEXT IS</span> <br> <span class="bold striked">A TEST</span> </h1> 

Answer 2

Something like this?

 body{ background: #333; font-family: arial; } .hero-text{ color: #fff; text-align: center; } .bold.striked{ position: relative; color: #fff; text-align: center; width: 300px; margin: 0 auto; z-index: 2; } .bold.striked::before{ content: ""; height: 15px; width: calc(100% + 50px); position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background: #4882d5; z-index: -1; } 

 <h1 class="white hero-text"> <span class="thin">ALL THIS TEXT IS</span> <br> <span class="bold striked">A TEST</span> </h1> 

Answer 3

Use pseudo selector :before as you mentioned and add span tag to only that section where you want that border bottom styling as in above image.

 span{ display:inline-block; position:relative; } span:before{ content:""; width:100%; height:10px; background:yellow; position:absolute; bottom:3px; z-index:-1; } 

 <h1 class="white hero-text"> ALL THIS TEXT IS <br> <span>A TEST</span> </h1>