Mogę stworzyć podkreślenie faliste jak to: 
mogę tylko solidne obramowanie:podkreślenie faliste w CSS
.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>Bez obrazu tła:
.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>z obrazu tła:
.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>To bardzo trudne ... haha. Powinieneś użyć obrazu tła, aby uzyskać ten sam efekt w każdej przeglądarce. – flks
W przypadku dłuższych słów nie działałoby to zbyt dobrze, należałoby umieścić na nim nadmiar i uczynić treść bardzo dużą. Ale podoba mi się ten pomysł. – Ruddy
Zależy to również od rodziny czcionek ... jeśli użytkownik ma domyślnie ustawioną w przeglądarce przeglądarkę Georgia lub Arial, Twoje rozwiązanie przestaje działać. To wymaga poprawek literowych. To nie jest najlepszy pomysł, jaki myślę. – flks
Można użyć właściwości CSS text-decoration-style.
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
Jednak, this is limited to Firefox and Safari. Może zaistnieć potrzeba użycia zamiast tego obrazu.
Dzięki @Alexander O'Mara :) –
To działa teraz w Chrome – SethWhite
Możesz użyć pseudoelementu :after na łączu i ustawić tło powtarzania x obrazu fali. Można również użyć właściwości CSS3 border-image, ale to not fully supported dla starych przeglądarek
Poniżej jest przykład jednego ze sposobów, że można to osiągnąć bez obrazu. Dostosuj w razie potrzeby.
.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>Gładki, bardzo dobry. Teraz to jest myślenie nieszablonowe. +1 – Ruddy
@Ruddy To jest w zasadzie to samo podejście, co ten http://stackoverflow.com/a/6821456/1811992 –
@ web-tiki Ah Widzę, że jest po prostu schludniejszy, ponieważ nie jest wbudowanym CSS i używa pseudo elementu. Wciąż bardzo miło to widzieć, nie myślałem o tej metodzie. – Ruddy
Spróbuj tego: http://www.phpied.com/curly-underline/ –
sprawdzeniu 'własności border-image' [tutaj] (http: //www.w3schools. com/cssref/css3_pr_border-image.asp) – Dpeif