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

After doing a bit of research it seems it can be done if you put a inside the

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

element.

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

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

  

    Pick some apples.

    Make some juice. with more text so long that it wraps.

    ????

    Profit!