Kann ich eine Wellenlinie wie folgt erstellen: 
ich nur eine feste Grenze bekommen:Eine Wellenlinie 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>Ohne Hintergrundbild:
.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>Mit Hintergrundbild:
.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>Das ist sehr schwierig ... haha. Sie sollten ein Hintergrundbild verwenden, um in jedem Browser denselben Effekt zu erzielen. – flks
Für längere Wörter würde das nicht sehr gut funktionieren, du müsstest einen Überlauf darauf setzen und den Inhalt sehr groß machen. Aber ich mag die Idee. – Ruddy
Es hängt auch von der Schriftfamilie ab ... Wenn der Benutzer Georgia oder Arial standardmäßig in seinem Browser eingestellt hat, funktioniert Ihre Lösung nicht mehr. Das benötigt Tippfehler. Nicht die beste Idee, denke ich. – flks
Sie die CSS-Eigenschaft text-decoration-style nutzen könnten.
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
Jedoch this is limited to Firefox and Safari. Möglicherweise müssen Sie stattdessen ein Bild verwenden.
Danke @Alexander O'Mara :) –
Dies funktioniert jetzt in Chrome – SethWhite
Sie können ein :after Pseudo-Element auf der Verbindung verwenden und einen repeat-x-Hintergrund eines Wave-Bildes festlegen. Sie können auch die border-image CSS3-Eigenschaft verwenden, aber das ist not fully supported für alten Browser
Im Folgenden ist ein Beispiel für eine der Möglichkeiten, wie Sie, dass ohne ein Bild erreichen können. Passen Sie wie erforderlich an.
.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>Glatt, sehr gut. Jetzt denkt das über den Tellerrand hinaus. +1 – Ruddy
@Ruddy Es ist im Grunde der gleiche Ansatz wie diese http://StackOverflow.com/A/6821456/1811992 –
@ Web-Tiki Ah ich sehe es ist einfach besser als seine nicht inline CSS und mit einem Pseudo-Element. Immer noch sehr nett zu sehen, dachte nicht an diese Methode. – Ruddy
Try this: http://www.phpied.com/curly-underline/ –
Besuche 'border-image' Eigenschaft [hier] (http: //www.w3schools. com/cssref/css3_pr_border-image.asp) – Dpeif