CSS

Text Decoration di CSS: Membuat dan Contoh Sintaknya

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.


Catur Kurnia Sari

Share
Tags: CSS