Zadanko polegające na przełożeniu grafiki na kod. Chcemy, aby tekst po najechaniu myszką był podkreślony linią innego koloru niż czcionka i dodatkowo o grubości 2px.

Skoro inny kolor niż czcionka i określona grubość, to text-decoration: underline odpada. No to nadajmy elemntowi z tekstem position relative. Określamy jego “after” jako position: absolute i dodajemy potrzebne style.


 

Niestety rozwiązanie okazało się nieidealne. Tekst jest długi i łamie się na dwie linie. Inny pomysł? Elementowi z tekstem nadajemy… border-bottom! To o wiele krótszy zapis i zawsze działa. Jeśli chcemy określić odległość linii od tekstu to dodatkowo określamy padding-bottom.

 

Author: