Dekorasi teks - Trik CSS

Anonim

The text-decorationproperti menambahkan garis bawah, overline, line-melalui, atau kombinasi dari baris ke teks yang dipilih.

h3 ( text-decoration: underline; )

Nilai

  • none: tidak ada garis yang ditarik, dan dekorasi yang ada dihilangkan.
  • underline: menggambar garis 1px melintasi teks pada garis dasarnya.
  • line-through: menggambar garis 1px melintasi teks pada titik "tengah" nya.
  • overline: menggambar garis 1px melintasi teks, tepat di atas titik "teratas" nya.
  • inherit: mewarisi dekorasi orang tua.

The blinknilainya di W3C spec, tetapi sudah ditinggalkan dan tidak akan bekerja di setiap browser saat ini. Ketika berhasil, itu membuat teks tampak "berkedip" dengan cepat beralih antara 0% dan 100% opacity.

Demo

Lihat Pen CSS-Tricks: Text Decoration by CSS-Tricks (@ css-trick) di CodePen.

Catatan Penggunaan

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

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

Secara default, garis atau garis mewarisi warna teks seperti yang diatur oleh colorpropertinya. Anda dapat mengubahnya di browser yang mendukung text-decoration-colorproperti atau properti singkatan tiga nilai.

text-decoration sebagai Properti Singkatan

text-decorationdapat digunakan dalam kombinasi dengan text-decoration-styledan text-decoration-colorsebagai properti singkatan:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Saat ini hanya Firefox yang mendukung fitur ini. Safari mendukungnya dengan -webkitawalan. Chrome juga membutuhkan -webkitawalan dan fitur platform web eksperimental yang diaktifkan di bendera Chrome.

Terkait

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Informasi Lebih Lanjut

  • text-decoration sebagai properti singkatan dalam spesifikasi W3C CSS Text Decoration Module Level 3 CR
  • dekorasi teks di MDN

Dukungan Browser

Semua browser mendukung properti "longhand" CSS2.1 text-decoration. Properti singkatan dan sub-sifat text-decoration-color, text-decoration-linedan text-decoration-styledidukung unprefixed di Firefox, dan dengan -webkitawalan di Safari. Chrome juga akan mengenali nilai-nilai tersebut dengan -webkitawalan dan tanda Platform Web Eksperimental diaktifkan.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
91 87 Tidak 88 TP

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

* text-decorationdidukung penuh, sub-properti didukung dengan -webkitawalan.
† sub-properti tambahan membutuhkan tanda fitur platform web eksperimental diaktifkan.
‡ Hanya CSS2.1 text-decoration; sub-properti tidak didukung.