Berikut ini adalah panduan untuk utility text decoration, mulai dari Line, Style, dan Color.
.text-decoration-strike
|
text-decoration: line-through;
|
.text-decoration-none
|
text-decoration: none;
|
.text-decoration-overline
|
text-decoration: overline;
|
.text-decoration-underline
|
text-decoration: underline;
|
.text-decoration-over-under
|
text-decoration: overline underline;
|
Penamaan class
.text-decoration-{line}
sangat mirip dengan penamaan pada properti aslinya, berikut ini contoh penggunaannya.
Line-through : Lorem ipsum dolor sit amet.
None : Lorem ipsum dolor sit amet.
Overline : Lorem ipsum dolor sit amet.
Underline : Lorem ipsum dolor sit amet.
Overline underline : Lorem ipsum dolor sit amet.
<p class="text-decoration-strike my-2">Line-through : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-none my-2">None : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-overline my-2">Overline : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline my-2">Underline : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-over-under my-2">Overline underline : Lorem ipsum dolor sit amet.</p>
.decoration-dashed
|
text-decoration-style: dashed;
|
.decoration-dotted
|
text-decoration-style: dotted;
|
.decoration-double
|
text-decoration-style: double;
|
.decoration-inherit
|
text-decoration-style: inherit;
|
.decoration-initial
|
text-decoration-style: initial;
|
.decoration-solid
|
text-decoration-style: solid;
|
.decoration-wavy
|
text-decoration-style: wavy;
|
Text decoration style digunakan untuk mengatur tampilan atau bentuk dari
text-decoration-line, berikut ini contoh penerapannya:
Dashed : Lorem ipsum dolor sit amet.
Dotted : Lorem ipsum dolor sit amet.
Double : Lorem ipsum dolor sit amet.
Inherit : Lorem ipsum dolor sit amet.
Initial : Lorem ipsum dolor sit amet.
Solid : Lorem ipsum dolor sit amet.
Wavy : Lorem ipsum dolor sit amet.
<p class="text-decoration-underline decoration-dashed my-2">Dashed : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline decoration-dotted my-2">Dotted : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline decoration-double my-2">Double : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline decoration-inherit my-2">Inherit : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline decoration-initial my-2">Initial : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline decoration-solid my-2">Solid : Lorem ipsum dolor sit amet.</p>
<p class="text-decoration-underline decoration-wavy my-2">Wavy : Lorem ipsum dolor sit amet.</p>
Untuk mengatur warna pada dekorasi teks, kamu bisa menggunakan class
.decoration-{color}-{level}, penggunaan class ini sangat mirip dengan class pada
Background Color
dan
Text Color, yang mana
{color}
adalah nama warna dan
{level}
adalah tingkatan warna.
Berikut contoh penggunaannya:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<p class="decoration-teal-500 text-decoration-overline">Lorem ipsum dolor sit amet.</p>
<p class="decoration-red-500 text-decoration-underline">Lorem ipsum dolor sit amet.</p>
<p class="decoration-cyan-500 text-decoration-underline decoration-wavy">Lorem ipsum dolor sit amet.</p>