Jak umieścić falowaną linię pod błędnie napisanymi słowami HTML

Question

Mam stronę HTML HTML & JS.

Potrzebuję dodać czerwoną linię za źle napisane słowa. Mam algorytm wykrywania tych słów, ale muszę tylko wiedzieć, jak umieścić falistą linię pod tymi słowami.

Answer 1

Właściwie nie masz standardowego kręcone podkreślenie tylko za pomocą CSS, ale sprawdź ten poradnik na temat tworzenia samemu:

Zrobione stąd: http://www.phpied.com/curly-underline/

.curly-underline { 
    background: url(underline.gif) bottom repeat-x; 
} 

Answer 2

Jeśli don” t chce użyć gif dla kręcone podkreślenia, można to zrobić przez czystego css:

<span style="border-bottom: 1px dotted #ff0000;padding:1px"> 
 
    <span style="border-bottom: 1px dotted #ff0000;"> 
 
     foobar 
 
    </span> 
 
</span>

(Lub uruchomić w JSFiddle)

Answer 3

Czerwony, faliste podkreślenia jest bardzo proste, jak określono w CSS 3'S Text Decoration Module.

* { text-decoration: underline wavy red; }

Run me in Chrome or Firefox to see me ride over a red wave!

wsparcie Przeglądarka dogania. Możesz dla Ciebie otrzymać vote for it dla Microsoft Edge, co zachęcam do zrobienia.

Specyfikacja nie jest nowa; Firefox obsługuje go od since 2011, a Chrome od 2016. Mamy nadzieję, że możemy również liczyć na Safari i Edge, aby wkrótce je wspierać.

Aktualizacja 2017: Chrome zamknął ten problem w 2016 r., A testowałem go w Chrome 58, który działa i stanowi duże wzmocnienie falistych linii.