下划线悬停效果会占用整个空间，但只应占用文本空间

Question

I'm actually trying to add an underline effect on the text when it is hovered

But when I hover on the p element the underline is taking actually the entire space, what I want is the underline should be displayed only within the text not the complete space which is occupied by the text

To do that I actually added a span element and gave the hover effect to the span, but still it is working the same,

Please check the effect I have added the code below, please help, Thanks in advance :)

 .underline-effect span: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); } .underline-effect span:hover:after{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 

 <p class="underline-effect"> <span>Home</span> </p> 

Answer 1

You need to add position: relative to your span element.

 .underline-effect span{ position: relative; } .underline-effect span: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); } .underline-effect span:hover:after{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 

 <p class="underline-effect"> <span>Home</span> </p> 

Answer 2

Your span needs to have a position: relative; that the span's pseudo-element can relate to:

 .underline-effect span { position: relative; } .underline-effect span:after { content: ''; position: absolute; top: 20px; left: 0; width: 100%; border-bottom: 2px solid; 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); } .underline-effect span:hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 

 <p class="underline-effect"> <span>Home</span> </p> 

Answer 3

The code is doing what you told it to do. you set the width of the parent element to 100% and that is why your animation hover affect is taking up 100%.

    .underline-effect span:after{
    content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 60px;/*changed from 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);
}
.underline-effect span:hover:after{
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

see this fiddle

EDIT: This will work but the above answer that putting position:relative on your span is a better solution imho

Answer 4

Span needs a relative position, but another way, you can give border-bottom to span, and padding or line-height that, and when you hover span, border-bottom is shown. I think this way is better.