Teks-dekorasi-baris - Trik CSS

Anonim

The text-decoration-lineproperti menghiasi teks dengan garis bawah, overline, line-melalui, atau kombinasi dari garis itu.

p ( text-decoration-line: underline; )

Nilai

  • none: tidak ada baris yang ditambahkan, dan baris apa pun yang ada dihapus - misalnya nonemenghapus garis bawah default pada tautan.
  • underline: menambahkan garis bawah 1px di bawah teks.
  • overline: menambahkan garis atas 1px di atas teks.
  • line-through: menambahkan garis 1px melalui teks.
  • inherit: mewarisi dekorasi orang tua.

Nilainya blinkada di spesifikasi W3C, tetapi sudah usang dan tidak akan berfungsi di browser apa pun saat ini. Ketika berhasil, itu membuat teks tampak "berkedip" dengan cepat beralih antara 0% dan 100% opacity.

Menggabungkan Nilai

Anda dapat menggabungkan nilai underline,, overlineatau line-throughdalam daftar yang dipisahkan spasi untuk menambahkan beberapa garis dekorasi:

p ( text-decoration-line: overline underline line-through; )

Pemakaian

The text-decoration-lineproperti praktis identik dengan aslinya text-decorationproperti. Jika yang ingin Anda lakukan hanyalah menambahkan satu baris atau beberapa baris ke teks Anda, text-decorationadalah pilihan yang lebih baik karena didukung oleh setiap browser, bahkan yang sangat lama. Umumnya, menggunakan text-decoration-linedeklarasi hanya masuk akal saat Anda menulis aturan gaya tangan panjang yang menyertakan text-decoration-styleatau text-decoration-colordeklarasi. Jika Anda ingin menggunakan ketiganya secara bersamaan, Anda dapat menggunakan text-decorationproperti steno .

Steno

text-decoration-linedapat digunakan bersama dengan text-decoration-styledan text-decoration-colordalam text-decorationproperti singkatan CSS3 (saat ini hanya Firefox yang mendukung sepenuhnya):

.underlined ( text-decoration: underline dotted red; )

Demo

Demo ini akan berfungsi di Safari, Firefox, dan Chrome dengan mengaktifkan fitur platform web eksperimental. The blinknilai tidak termasuk.

Lihat baris dekorasi teks Pena oleh CSS-Trik (@ css-trick) di CodePen.

Terkait

  • dekorasi teks
  • gaya dekorasi teks
  • warna-dekorasi-teks
  • teks-dekorasi-lewati

Informasi Lebih Lanjut

  • text-decoration-line di spesifikasi W3C
  • text-decoration-line di MDN

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
31 * † 7.1 * 6 ‡ Tidak ada Tidak ada Tidak ada 8 *

* dengan -webkitawalan
† dengan tanda fitur Platform Web eksperimental diaktifkan
‡ 6 - 35 dengan -mozawalan, tidak difiksasi mulai 36.