Pada tutorial kali ini akan membahas bagaimana cara mengatur teks pada CSS menggunakan text decoration. Pada CSS untuk mengatur text decoration dapat dilakukan menggunakan properti decoration-text. Properti decoration-text juga dapat digunakan untuk menghapus text decoration dari sebuah teks.
Properti decoration-text dapat digunakan untuk membuat teks underline, overline, dan line-through.
Sedangkan untuk menghapus decoration biasanya digunakan “text-decoration : none” seperti contoh dibawah ini.
Contoh menghapus decoration:
<!DOCTYPE html> <html> <head> <style> a { text-decoration: none; } </style> </head> <body> <p>Sebuah link tanpa garis bawah (underline): <a href="https://dosenit.com">dosenit.com</a></p> </body> </html>
Berikut ini adalah contoh penggunaan text-decoration untuk membuat teks menjadi overline, line-through, dan underline:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
</body>
</html>
Catatan: Tidak disarankan untuk menggarisbawahi sebuah teks yang bukan link, karena hal tersebut sering membingungkan pembaca.
Sekian pembahasan dan cara penggunaan decoration text pada CSS, semoga bermanfaat.
