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?

Jonathan Falkner · Accepted Answer · 2017-02-08T20:25:15.460

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.

score 1 · Answer 2 · answered Sep 11 '16 at 03:05

.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>

score 1 · Answer 3 · edited May 23 '17 at 12:02

Here is an simple solution for it,

original solution is by Sleek Geek in the post

.error {
  display: inline-block;
  position: relative;
  border-bottom:2px dotted red;
}
.error:before {
  content: "~";
  font-size: 0.6em;
  font-weight: 700;
  font-family: Times New Roman, Serif;
  color: red;
  width: 100%;
  position: absolute;
  height: 5px;
  top: 14px;
  left: -2px;
  overflow: hidden;
  border-bottom: 2px dotted red;
}

Just wrap html text selection using a <span class="error"> like this,

<p>
   Lorem ipsum dolor sit amet, <span class="error">consectetur adipiscing
   elit</span> Maecenas.
</p>

See the example: https://jsfiddle.net/hq13awkz/2/

score 1 · Answer 4 · edited Sep 12 '16 at 08:41

1

p { 
   text-decoration: underline; 
   -moz-text-decoration-color: red; 
   text-decoration-color: red; 
   -moz-text-decoration-style: wavy; /* Code for Firefox */ 
   text-decoration-style: wavy;
}

<p>Here's some text with wavy red underline!</p>

edited Sep 12 '16 at 08:41

Jerad Rutnam

1,536
1
14
29

answered Sep 11 '16 at 14:50

Razia sultana

2,168
3
15
20

Penny Liu · Answer 5 · 2019-09-20T02:14:41.723

Look into text-decoration. This is the shortest I got.

The text-decoration-skip-ink: none; can be drawn across the full length of the text content.

.err {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

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

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

5 Answers5