CODEWITHSUNDEEP
css
Jools
Jools

Reputation: 97

Css text overlap bottom border

I've been at this for a while but can't seem to get the right effect.

I would like m H1 to overlap a bottom border below it. Not only that it will need to wrap when viewed on smaller device.

I've added a link to an image of the effect I am trying to achieve and also showing how i need it to wrap.

Image example of what I need to do:

enter image description here

The closest I have come is by using:

 box-shadow: inset 0 -0.1em red;

But this sits right at the bottom of the title and I need for example the tail of a 'g' to overlap it.

h1 {
  color: #000;
  font-size: 13rem;
  line-height: 1.1;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0.5em 0;
  padding: 0 2%;
  letter-spacing: -0.75rem;
}

h1 span.stroke-pink {
  box-shadow: inset 0 -0.1em #fc1561;
}
<h1><span class="stroke-pink">Our unique culture.</span></h1>

Thanks

Upvotes: 1

Views: 843

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

You can do this with linear-gradient and easily control the position/size:

h1 {
   color: #000;
  font-size: 35px;
  max-width:200px;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0.5em 0;
}

.stroke-pink {
  background-image:linear-gradient(pink,pink);
  background-position:0 100%;
  background-size:100% 5px; 
  background-repeat:no-repeat;
  
  animation:change 1s infinite linear alternate;
}

@keyframes change {
  from {background-position:0 100%;}
  to {background-position:0 80%;}
 }
<h1><span class="stroke-pink">Our unique culture.</span></h1>

Upvotes: 5

Related Questions