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 :)

```css
.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);
}
```

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