Edned Edned - 5 months ago 18
HTML Question

Hovering title inside a row

I have a question about something I have build for my website.

enter image description here

Above is a gif of me highlighting titles on my web landing page. As you can see, the line extends further than the text. I think I have an idea about why it is doing this, because I have a row which is equally spaced into three parts. I have tried altering the code and I cannot get it to go past the lines, however.

<div class="icons">
<div class="col-sm-4">
<a class="img-responsive animated bounceInUp" href=""><p class="effect-underline" style="font-family: Ubuntu; font-size: 60px;">About Me</p></a>
</div>
<div class="col-sm-4">
<a class="img-responsive animated bounceInUp" href=""><p class="effect-underline" style="font-family: Ubuntu; font-size: 60px;">My Projects</p></a>
</div>
<div class="col-sm-4">
<a class="img-responsive animated bounceInUp" href=""><p class="effect-underline" style="font-family: Ubuntu; font-size: 60px;">Contact Me</p></a>
</div>
</div>


Above is the code I use to display the three columns to divide it up and also equally space and align the text. Is there any possible way which I could prevent the underline feature going further than the text, while maintaining this column structure?

This is the CSS associated with the
:hover
.

p.effect-underline:after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 2px solid;
margin-top: 10px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}

p.effect-underline:hover:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

Answer

You need to set your p as display:inline-block, and because you are setting position: absolute in pseudo-element ::after you need to set position: relative in p

Avoid using inline styles, try style in CSS instead.

p::after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 2px solid;
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
p:hover::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
p {
  display: inline-block;
  position: relative;
  font-family: Ubuntu;
  font-size: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row icons">
    <div class="col-sm-4">
      <a class="img-responsive animated bounceInUp" href="">
        <p class="effect-underline" style="">About Me</p>
      </a>
    </div>
    <div class="col-sm-4">
      <a class="img-responsive animated bounceInUp" href="">
        <p class="effect-underline">My Projects</p>
      </a>
    </div>
    <div class="col-sm-4">
      <a class="img-responsive animated bounceInUp" href="">
        <p class="effect-underline">Contact Me</p>
      </a>
    </div>
  </div>
</div>