Текст-декорација-линија - ЦСС-трикови

Anonim

text-decoration-lineПроперти украшава текст са подвучено, оверлине, лине-тхроугх или комбинацијом ових линија.

p ( text-decoration-line: underline; )

Вредности

  • none: није додата линија, а све постојеће линије су уклоњене - на пример noneуклања подразумевано подвлачење на везама.
  • underline: додаје испод текста подвлачење од 1 пиксела.
  • overline: додаје надгледање од 1 пиксела изнад текста.
  • line-through: додаје ред од 1 пиксела кроз текст.
  • inherit: наслеђује украс родитеља.

Вредност blinkје у спецификацији В3Ц, али је застарела и неће радити ни у једном тренутном прегледачу. Када је успео, чинило се да текст „трепће“ тако што га је брзо пребацио између 0% и 100% непрозирности.

Комбиновање вредности

Можете комбиновати underline, overlineили line-throughвредности у листи простор одвојен да додате више декорацији линије:

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

Употреба

text-decoration-lineИмовина је практично идентичан оригиналном text-decorationимовине. Ако све што желите је да додате линију или редове свом тексту, text-decorationбољи је избор јер га подржава сваки прегледач, чак и врло стари. Генерално, употреба text-decoration-lineдекларације има смисла само када пишете правило дуготрајног стила које укључује text-decoration-styleили text-decoration-colorдекларацију. Ако желите да користите све три заједно, можете да користите text-decorationсвојство стенографије .

Стенографија

text-decoration-lineможе се користити у комбинацији са text-decoration-styleи text-decoration-colorу скраћеници ЦСС3 text-decorationсвојства (тренутно само Фирефок ово у потпуности подржава):

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

Демо

Ова демонстрација ће радити у Сафари-ју, Фирефок-у и Цхроме-у са омогућеним експерименталним функцијама веб платформе. blinkВредност није укључен.

Погледајте линију текста за украшавање оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Повезан

  • декорација текста
  • текст-декорација-стил
  • текст-декорација-боја
  • текст-украс-прескочи

Више информација

  • text-decoration-line у спецификацији В3Ц
  • text-decoration-line на МДН

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
31 * † 7,1 * 6 ‡ Ниједан Ниједан Ниједан 8 *

* са -webkitпрефиксом
† са омогућеном експерименталном функцијом Веб Платформ
‡ 6 - 35 са -mozпрефиксом, без префикса од 36.