Zmiana koloru, kształtu i grubości linii w podkreśleniu oraz przekreśleniu

Chociaż linia w podkreśleniu i przekreśleniu zdaje się być integralną częścią tekstu, to dzięki odpowiednim właściwościom CSS możemy modyfikować ją indywidualnie. Zmianom tym podlegają jej kolor, kształt oraz grubość.

Zmiana koloru linii w podkreśleniu i przekreśleniu

W podkreśleniu oraz przekreśleniu możemy ustawić odrębny kolor dla samej linii dzięki właściwości text-decoration-color. Jeżeli nie zostanie ona zdefiniowana, linia będzie miała ten sam kolor co tekst.

Inny kolor linii w podkreśleniu

u, ins{
	color: black;
  text-decoration-color: red;
}

Inny kolor linii w przekreśleniu

strike, del{
  color: black;
  text-decoration-color: red;
}

Zmiana kształtu i grubości linii

Co więcej, można również zmienić styl linii z domyślnej ciągłej np. na przerywaną. Oto lista dostępnych wartości dla właściwości text-decoration-style:

• solid: ustawienie domyślne, pojedyncza linia ciągła,
• double: podwójna linia ciągła,
• dotted: linia kropkowana,
• dashed: linia przerywana,
• wavy: linia falista.

Przykład zastosowania:

u, ins, strike, del{
    text-decoration-style: dashed;
}

Można również zmienić grubość linii za pomocą właściwości text-decoration-thickness.

u, ins, strike, del{
    text-decoration-thickness: 3px;
}

Wsparcie w przeglądarkach

Zarówno text-decoration-style, jak i text-decoration-color są względnie nowe, dlatego w starszych przeglądarkach mogą wymagać stosowania prefiksów, a w jeszcze starszych – nie są wspierane w ogóle np. IE. (IE to taki dinozaur wśród przeglądarek, więc nie należy się tym brakiem wsparcia szczególnie przejmować). Niemniej dla zapobiegliwych poniżej zamieszam prefiksy dla obu właściwości.

Natomiast właściwość text-decoration-thickness pełne wsparcie wiodących przeglądarek uzyskała dopiero w tym roku. Z tego względu widząc brak zmiany po wklejeniu kodu CSS, w pierwszej kolejności należy sprawdzić wersję przeglądarki, z której się korzysta. Tutaj znajdują się dokładnie informacje o wsparciu.

Perfiksy dla właściwości text-decoration-color

u, ins, strike, del{
    -webkit-text-decoration-color: red;
    -moz-text-decoration-color: red;
    text-decoration-color: red;
}

Perfiksy dla właściwości text-decoration-style

u, ins, strike, del{
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-style: wavy;
    text-decoration-style: wavy;
}

Alternatywne rozwiązanie

W przypadku podkreślenia istnieje inna metoda pozwalająca na uzyskanie tego samego efektu, z wykorzystaniem dostępnego w CSS obramowania. Dla znaczników u i ins można zastosować poniższy trik.

u, ins{
    text-decoration: none;
    border-bottom: 1px dotted red;
}

Powyższy zapis jest wspierany w każdej przeglądarce i pozwala na dowolne modyfikowanie grubości linii.

Wdrożenie zmian na blogu

Powyższy kod CSS można dodać do kodu szablonu, postępując według tej instrukcji: Jak dodać kod CSS na swoim blogu? We wcześniejszym artykule znajdują się dodatkowe informacje o zmianie wyglądu formatowania tekstu.