How to create a wavy underline on mutilline text with CSS?

Question

I tried A wavy underline in CSS these methods and found them cannot keep the original state of text. They only display in one line. If selected range more than one row, it will not display. So can anyone tell me how to improve it?

Answer 1

Here's my wavy line solution: http://dabblet.com/gist/f6cfd244631c8ca898ef60b100b96386

.err { 
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 8px 2px;
  background-position:0 95%;
}

<p>This text has a <span class='err'>tpyo</span> in it. </p>
<p>This text has a <span class='err'>logner pyto insid Spicy jalapeno bacon ipsum dolor amet tail tenderloin doner turducken shankle, meatloaf flank spare ribs tri-tip prosciutto kielbasa chicken alcatra landjaeger. Alcatra meatball pork, shank meatloaf porchetta biltong pig</span>.</p>

It only works on inline elements, so if you are attempting to apply to a paragraph tag, and don't apply it to the span around the text inside the paragraph tag, it doesn't work well, but generally speaking you'd apply this type of style to inline elements anyways.

Answer 2

.err {
  border-bottom:2px dotted red;
  display: inline-block;
  position: relative;
}

.err:after {
  content: '';
  height: 5px;
  width: 100%;
  border-bottom:2px dotted red;
  position: absolute;
  display:block;
  bottom: -3px;
  left: -2px;

  
  }

<div class="err">This is the first line </div><br/>
<div class="err">This is the second line</div>