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

by

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>

More Related Contents:

  1. Input type="text" with select functionality after clicking on Input type="text"
  2. jQuery .animate function not responding properly
  3. How to change css of a div with a certain id when hovering over a certain element anywhere in the whole webpage?
  4. Reloading a single div in an html page [closed]
  5. Pure JavaScript toggle for select / deselect all checkboxes [duplicate]
  6. fixing slider on my website [closed]
  7. Can I use HTML tags in the options for select elements? [duplicate]
  8. Changing nav-bar color after scrolling?
  9. make html text input field grow as I type?
  10. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  11. width/height after transform
  12. Save a pre element as PDF with CSS
  13. Creating a select box with a search option
  14. jQuery Validation using the class instead of the name value
  15. Center flex item in container, when surrounded by other flex items
  16. Change the style of :before and :after pseudo-elements? [duplicate]
  17. How to resize Twitter Bootstrap modal dynamically based on the content
  18. Uncaught TypeError: Cannot read property ‘top’ of undefined
  19. collapse and expand tabs jquery / simple accordion
  20. Remove scrollbar but not scrolling functionality [duplicate]
  21. Print repeating Page headers in Chrome [closed]
  22. Retain scrollbar position even after reloading using javascript
  23. How can I dynamically highlight strings on a web page?
  24. How can I make an image carousel with only CSS?
  25. How to Bootstrap navbar static to fixed on scroll?
  26. How to use pagination on HTML tables?
  27. How to customize the position of an alert box
  28. Showing Placeholder text for password field in IE
  29. How can I reorder elements with JavaScript?
  30. In jQuery mobile, what’s the diff between tap and vclick?

Leave a Comment