Diskon! Diskon! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

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

👈🏼 Text align pada CSS
Text transformation pada CSS 👉🏼