How to increase width of underline for the multiline text when on hover

Question

Fellow brothers in code,

I am trying to achieve custom text-decoration: underline; effect for the multiline text between

tags. Si

Answer 1

Is this what you're looking for?

I used the :after pseudo-element and gave it absolute position

Te render the effect I added a bottom-border to the pseudo-element and lift it up a little bit with a -.35em top which result in it always adjusting to the main element's font-size.

Working example:

p span {
  display:inline;
  position: relative;
  font-size: 30px;
  font-weight: 500;
  color: #27196e;
}

p:hover span:after {
  content: "";
  position: absolute;
  height:100%;
  width:100%;
  top: -.35em;
  left: 0;
  border-bottom: 8px solid rgba(111, 111, 255, .4)
}

<p>
<span>Let the paint work</span>
<br/>
<span>Share it with a friend</span>
<br/>
<span>Just float around and be there</span>
</p>

Answer 2

Wrap every phrase inside a p, like this:

<p>
let the paint work21321321213123321321321  213 
</p>
<p>
let the paint work   
</p>
<p>
let the paint work   
</p>

css

p {
    height: auto;
    position: relative;
    width: 200px;
    }

 p::before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        width: 130%;
        left: 0%;
        border-bottom: 1px solid red;
    }

Answer 3

After doing a bit of research it seems it can be done if you put a <span> inside the <p> and add a box-shadow to that. This works better than a border because the border has to be displayed below the text only. This allows the underline to intersect the text. This is an added element, but it doesn't require that you break up everything in it's own <p> element.

.underline{
  max-width: 240px;
  font-family: sans-serif;
  font-size: 20px;
}

.underline:hover span{
  box-shadow: inset 0 -10px lightblue;
}

  <p class="underline">
    <span>Pick some apples.<br>
    Make some juice. with more text so long that it wraps.<br>
    ????<br>
    Profit!
    </span>
  </p>

Answer 4

Not sure if you can inject a span into the paragraph. If you can, it is simple enough by setting the bottom border.

p:hover > span {
  border-bottom: 5px solid black
}

<p><span>Bacon ipsum dolor amet sausage ribeye pastrami, chuck sirloin filet mignon pancetta tail boudin ground round flank pork t-bone turducken. Venison boudin cupim bresaola corned beef meatball pork loin pancetta doner drumstick. Bresaola pork loin fatback pig turkey. Biltong bresaola shoulder cow shankle pork belly brisket ham hock chuck. Meatball drumstick salami pork loin.</span></p>

Answer 5

You can use box-shadow for your case like this:

.custom-underline {
    font-size:200%;
    font-weight:bold;
    margin: 0;
    display: inline-block;
}
.custom-underline:hover {
    box-shadow: inset 0 -15px 0 violet, inset 0 -3px 0 black
}

<p class='custom-underline'>Let the paint work</p>
<br>
<p class='custom-underline'>Share it with a friend</p>
<br>
<p class='custom-underline'>Just float around and be there</p>

Answer 6

You can use a repeating linear gradient, and set display: inline on the paragraph to draw the lines only under the text:

p {
  display: inline;
  font-size: 20px;
  line-height: 28px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 14px, rgba(128, 0, 128, 0.5) 14px, rgba(128, 0, 128, 0.5) 22px);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet elementum purus sed fermentum. Aliquam vehicula vel leo ut ullamcorper. <br /> Aenean condimentum justo massa, et eleifend quam elementum at. Mauris vulputate quam ut velit mattis, at pretium
  ex faucibus. Nulla facilisi. <br /> Quisque condimentum sapien ut diam lacinia, non commodo turpis faucibus. Ut in nisl nec magna lobortis tristique ac vitae ante. Cras egestas felis nec tortor varius rhoncus. Phasellus sagittis eget dolor ut condimentum.</p>