Logo Komodo Koding /Koding

Text decoration pada CSS

Untuk memberi baris pada text, baik itu di atas, bawah atau tengah kita bisa menggunakan text-decoration

CSS punya properti text-decoration untuk memberi hiasan berupa baris untuk sebuah text HTML.

Contoh menggunakan text-decoration

Berikut contoh memberi baris pada berbagai posisi untuk sebuah element

<p style="text-decoration:overline;"> 
    Saya overline 
</p>
<p style="text-decoration:line-through;"> 
    Saya line-through 
</p>
<p style="text-decoration:underline;"> 
    Saya underline 
</p>

Hasil:

Saya overline

Saya line-through

Saya underline

Warna text-decoration

Warna dari baris text juga bisa diatur dengan properti text-decoration-color, yang bisa diaplikasikan pada text-decoration mana saja.

<p style="
    text-decoration:line-through;
    text-decoration-color: yellow;
    "> 
    Saya line-through 
</p>

Saya line-through

Gaya dari baris text-decoration

Seperti border, kamu bisa mengatur gaya dari baris text-decoration, seperti:

  • solid (defaultnya)
  • double
  • dotted
  • dashed
  • wavy
<p style="
    text-decoration:line-through;
    text-decoration-color: yellow;
    text-decoration-style: wavy;
    "> 
    Saya line-through wavy
</p>

<p style="
    text-decoration:line-through;
    text-decoration-color: aqua;
    text-decoration-style: dotted;
    "> 
    Saya line-through dotted
</p>

Saya line-through wavy

Saya line-through dotted

Ketebalan baris text-decoration

Ketebalan baris text-decoration juga bisa diatur dengan properti text-decoration-thickness.

<p style="
    text-decoration:line-through;
    text-decoration-color: yellow;
    text-decoration-style: wavy;
    text-decoration-thickness: 5px;
    "> 
    Saya line-through wavy
</p>

<p style="
    text-decoration:line-through;
    text-decoration-color: aqua;
    text-decoration-style: dotted;
    "> 
    Saya line-through dotted
</p>

Saya line-through wavy

Saya line-through dotted

Penulisan singkat text-decoration

Semua properti tadi, bisa dideklarasikan secara singkat lewat 1 baris text-decoration

<p style="text-decoration: underline blue dashed 2px;"> 
    Saya baris satu
</p>

<p style="text-decoration: overline red double 5px;"> 
    Saya baris dua
</p>

Saya baris satu

Saya baris dua