CODEWITHSUNDEEP
jquerycss
Giacomo Torricelli
Giacomo Torricelli

Reputation: 763

CSS "underline" text part

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

The blue "rectangle 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>

Upvotes: 2

Views: 1794

Answers (3)

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 2

Kushtrim
Kushtrim

Reputation: 1939

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>

Upvotes: 1

Related Questions