Posso creare una sottolineatura ondulata come questo: 
posso solo ottenere un bordo solido:Una sottolineatura ondulata in 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>immagine di sfondo Senza:
.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>immagine di sfondo con:
.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>Questo è molto complicato ... haha. Dovresti usare un'immagine di sfondo per avere lo stesso effetto su ogni browser. – flks
Per parole più lunghe questo non avrebbe funzionato molto bene, avresti dovuto inserire un overflow e rendere il contenuto molto grande. Ma mi piace l'idea. – Ruddy
Dipende anche dalla famiglia di font ... se l'utente ha Georgia o Arial per impostazione predefinita nel suo browser, la tua soluzione non funziona più. Questo ha bisogno di correzioni di errori di battitura. Non è la migliore idea, penso. – flks
è possibile utilizzare la proprietà CSS text-decoration-style.
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
Tuttavia, this is limited to Firefox and Safari. Potrebbe essere necessario prendere in considerazione l'utilizzo di un'immagine invece.
Grazie @Alexander O'Mara :) –
Questo funziona ora in Chrome – SethWhite
È possibile utilizzare uno pseudoelemento :after sul collegamento e impostare uno sfondo di ripetizione-x di un'immagine wave. È inoltre possibile utilizzare la proprietà CSS3 border-image, ma questo è not fully supported per i vecchi browser
Di seguito è un esempio di uno dei modi che si possono ottenere che senza un'immagine. Regolare secondo necessità.
.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>Liscio, molto buono. Ora è pensare fuori dagli schemi. +1 – Ruddy
@Ruddy È fondamentalmente lo stesso approccio di questo http://stackoverflow.com/a/6821456/1811992 –
@ web-tiki Ah, vedo che è appena più ordinato come CSS non in linea e che utilizza uno pseudo elemento. Ancora molto bello da vedere, non pensavo a questo metodo. – Ruddy
Prova questo: http://www.phpied.com/curly-underline/ –
check out 'proprietà border-image' [qui] (http: //www.w3schools. com/cssref/css3_pr_border-image.asp) – Dpeif