A wavy underline in CSS

Question

Can I create a wavy underline as this :
I can only get a solid border :

.err {
  border-bottom:1px solid red;
  display: inline-block;
}

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

check out `border-image` property [here](http://www.w3schools.com/cssref/css3_pr_border-image.asp) — Dpeif, Jan 26 '15 at 14:37

score 40 · Accepted Answer · edited Feb 28 '16 at 19:21

40

Without background image:

.err {
  display: inline-block;
  position: relative;
}
.err:before {
  content: "~~~~~~~~~~~~";
  font-size: 0.6em;
  font-weight: 700;
  font-family: Times New Roman, Serif;
  color: red;
  width: 100%;
  position: absolute;
  top: 12px;
  left: -1px;
  overflow: hidden;
}

<div>A boy whose name was Peter was
  <div class="err">woking</div> down the street</div>

With Background image :

.err {
    display: inline-block;
    position:relative;
    background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
}

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

edited Feb 28 '16 at 19:21

user2226755

12,494
5
50
73

answered Jan 26 '15 at 14:39

The Pragmatick

5,379
27
44

4

That's very tricky… haha. You should use a background image to have the same effect on every browser. – flks Jan 26 '15 at 14:40
2

For longer words this wouldn't work very well, you would have to put an overflow on it and make the content very big. But I like the idea. – Ruddy Jan 26 '15 at 14:44
1

It also depends on the font family… if the user have Georgia or Arial by default set in his browser, your solution is not working anymore. That needs typo fixes. Not the best idea I think. – flks Jan 26 '15 at 14:45
I have changed font-family to Times New Roman, which is available on almost every computer. – The Pragmatick Jan 26 '15 at 14:52
5

For such a small image, the data scheme may be preferred data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs= – Myobis Feb 16 '17 at 18:02

Sleek Geek · Answer 2 · 2017-02-14T18:37:32.550

34

Below is an example of one of the ways that you can achieve that without an image. Adjust as needed.

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

}

.err:after {
  content: '';
  width: 100%;
  border-bottom:2px dotted red;
  position: absolute;
  font-size: 16px;
  top: 15px; /* Must be font-size minus one (16px - 1px) */
  left: -2px;
  display: block;
  height: 4px;

  
  }

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

edited Feb 14 '17 at 18:37

answered Jan 26 '15 at 14:41

Sleek Geek

4,638
3
27
42

4

Smooth, very good. Now thats thinking outside the box. +1 – Ruddy Jan 26 '15 at 14:45
2

@Ruddy It's basicaly the same approach as this http://stackoverflow.com/a/6821456/1811992 – web-tiki Jan 26 '15 at 14:48
1

@web-tiki Ah I see its just neater as its not inline CSS and using a pseudo element. Still very nice to see, didn't think of this method. – Ruddy Jan 26 '15 at 14:50
why do both the `.err` and `.err:after` rules have bottom borders? – Jason S Sep 12 '16 at 22:55
@Jason S: If either of the two does not have bottom borders, it will just look like dots. – Sleek Geek Sep 13 '16 at 01:56
4

I've taken this and made it font-size agnostic, if anyone is interested: https://codepen.io/hyrumwhite/pen/MQLbjP – SethWhite Feb 28 '18 at 22:30
The best solution. Works excellent. I changed it a bit to avoid using non-relevant constants and styles (for example, display: is not required and top: should be replaced to bottom:) and it is exactly what I need. For example, Google uses background image which is less useful as it requires to add additional elements and they are blocks, so it is hard to use in mixed mode. text-decoration doesn't give what I need because the wave height is bigger and cannot be adjusted. – Oleg Gordeev Aug 26 '19 at 10:16

score 19 · Answer 3 · edited Jan 26 '15 at 14:49

19

You could use the CSS text-decoration-style property.

-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;

However, this is limited to Firefox and Safari. You may need to consider using a image instead.

edited Jan 26 '15 at 14:49

Alexander O'Mara

58,688
18
163
171

answered Jan 26 '15 at 14:38

Richard Blyth

450
3
10

2

This is now working in Chrome – SethWhite Aug 01 '17 at 21:31
@SethWhite - Have you got an example of this in Chrome as I can't get it to work. mistakes – Steve Childs Jan 21 '19 at 12:41
2

@SteveChilds sure: https://codepen.io/hyrumwhite/pen/exOQLy You just need to add text-decoration: underline, then apply the wavy style. – SethWhite Jan 21 '19 at 15:45
Looks like you can add `text-decoration-color: red` by now as well! – asjo Aug 28 '20 at 22:04
Great solution and works in Chrome: `text-decoration: underline wavy 1em red;`. You must use it with vendors too: **-webkit** and **-moz** – J. A. Mendez Apr 23 '21 at 00:55
1

This works, but is quite ugly unfortunately. – Pi Da Sep 17 '21 at 19:06
1

Now working in all major browsers, correct CanIUse specific for "wavy" here: https://caniuse.com/mdn-css_properties_text-decoration-style_wavy – d2vid Feb 23 '23 at 09:50

score 0 · Answer 4 · answered Jan 26 '15 at 14:39

0

You can use a :after pseudo-element on the link and set a repeat-x background of a wave image. You can also use the border-image CSS3 property, but this is not fully supported for old browsers

answered Jan 26 '15 at 14:39

flks

610
10
28

A wavy underline in CSS

4 Answers4

Linked