Metin dekorasyon satırı - CSS Hileleri

Anonim

text-decoration-lineÖzelliği, bir alt çizgi, üst çizgi, hat sayesinde, ya da o çizgilerin kombinasyonu ile metin süsleyen.

p ( text-decoration-line: underline; )

Değerler

  • none: herhangi bir satır eklenmez ve mevcut satırlar kaldırılır - örneğin none, bağlantılardaki varsayılan alt çizgiyi kaldırır.
  • underline: metnin altına 1 piksellik bir alt çizgi ekler.
  • overline: metnin üstüne 1 piksellik bir üst çizgi ekler.
  • line-through: metne 1 piksellik bir satır ekler.
  • inherit: ebeveynin dekorasyonunu devralır.

Değer blinkW3C spesifikasyonundadır, ancak kullanımdan kaldırılmıştır ve mevcut tarayıcılarda çalışmayacaktır. İşe yaradığında, metnin% 0 ile% 100 opaklık arasında hızla geçiş yaparak "yanıp sönüyor" görünmesini sağladı.

Değerleri Birleştirmek

Birleştirebilirsiniz underline, overlineya line-throughbirden dekorasyon çizgileri eklemek için bir boşlukla ayrılmış listede değerleri:

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

Kullanım

text-decoration-lineMülkiyet orijinal ile pratik olarak aynıdır text-decorationözelliği. Yapmak istediğiniz tek şey metninize bir satır veya satır eklemekse text-decorationdaha iyi bir seçimdir çünkü çok eski tarayıcılar da dahil olmak üzere her tarayıcı tarafından desteklenir. Genellikle, bir kullanarak text-decoration-linesize içeren bir longhand stil kuralını yazarken beyanı sadece mantıklı text-decoration-styleveya text-decoration-colorbeyanı. Üçünü de birlikte kullanmak istiyorsanız, steno text-decorationözelliğini kullanabilirsiniz .

Kısa gösterim

text-decoration-linesteno CSS3 özelliği ile birlikte text-decoration-styleve text-decoration-coloriçinde kullanılabilir text-decoration(şu anda yalnızca Firefox bunu tam olarak desteklemektedir):

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

Demo

Bu demo, deneysel web platformu özellikleri etkinleştirilmiş olarak Safari, Firefox ve Chrome'da çalışacaktır. blinkDeğeri dahil değildir.

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem metin dekorasyon satırına bakın.

İlişkili

  • metin süsleme
  • metin dekorasyon stili
  • metin-dekorasyon-rengi
  • metin-dekorasyon-atlama

Daha fazla bilgi

  • text-decoration-line W3C spesifikasyonunda
  • text-decoration-line MDN'de

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
31 * † 7.1 * 6 ‡ Yok Yok Yok 8 *

* -webkitönek ile
† deneysel Web Platformu özellikleri bayrağı etkinken
‡ -moz36'dan itibaren önekli 6 - 35 önekli.