I want to style selected words with a wavy red underline. This answer explains how to do it using text-decoration, and it works fairly well. However, it’s not perfect. The wavy line breaks near certain characters, such as the characters g, j and y. Is there a solution for this?

You can also try in this playground mentioned in the solution.

I want to style selected words with a wavy red underline. This answer explains how to do it using text-decoration, and it works fairly well. However, it’s not perfect. The wavy line breaks near certain characters, such as the characters g, j and y. Is there a solution for this?

You can also try in this playground mentioned in the solution.

• css

Share Improve this question Follow edited Mar 25 at 6:26 Brett Donald 14.9k55 gold badges3535 silver badges6161 bronze badges asked Mar 25 at 4:41 vibhaysinghvibhaysingh 4655 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

Use text-underline-offset. Lowercase letters like qygpj that extend below the baseline are called descenders.

.line {
  text-decoration: underline wavy red;
}

.offset {
  text-underline-offset: 0.5rem;
}

<h1 class="line">qygpj</h1>

<h1 class="line offset">qygpj</h1>

What you need is the text-decoration-skip-ink property.

However, please be aware that this method may make it challenging to differentiate between similar letters, such as 'i' and 'j', if the text and underline share the same color. I recommend using an offset if employing different colors for the text and underline is not feasible.

You have two options for solving this. The first option is to tell the browser not to skip the underline in areas where it would overlap a character, by setting text-decoration-skip-ink: none.

.line {
  -webkit-text-decoration: underline wavy red; /* Safari */
  text-decoration: underline wavy red;
}

.skip {
  text-decoration-skip-ink: none;  /* has no effect in Safari, which doesn’t skip the ink in the first place */
}

<h1 class="line">jumps quickly</h1>

<h1 class="line skip">jumps quickly</h1>

The second option is to move the underline further away from the text by increasing the text-underline-offset.

.line {
  -webkit-text-decoration: underline wavy red; /* Safari */
  text-decoration: underline wavy red;
}

.offset {
  text-underline-offset: 0.3em;
}

<h1 class="line">jumps quickly</h1>

<h1 class="line offset">jumps quickly</h1>