CSS Text Decoration Property

CSS text property is used to add decoration to text. It is different from text font, color etc.

CSS text decoration property supports 5 values –

  1. none, which removes any decoration
  2. underline, which draws a 1px line across the text at the baseline
  3. line-through, which draws a 1px line across the text at the text’s “middle” point
  4. overline, which draws a 1px line across the text at the text’s “top” point
  5. blink, a much-maligned property that causes the text to flash, alternating between 0 and 100% opacity

 

Some other text decoration properties and effect in the following table – 

 

text-decorationOverlinep{ text-decoration: overline; }Gives text with overline
text-decorationUnderlinep{ text-decoration: underline; }Gives text with underline
text-decorationNonep{ text-decoration: none; }Gives text with nolines
text-indentpxp{ text-indent: 30px; }Gives text with a 30px indent
text-indent%p{ text-indent: 30%; }Gives text with a 30% indent
text-alignrightp{ text-align: right; }Right-aligns text
text-alignLeftp{ text-align: left; }Left-aligns text
text-alignjustifyp{ text-align: justify; }Justifies text
text-transformcapitalizep{ text-transform: capitalize; }Gives text in capitals
text-transformuppercasep{ text-transform: uppercase; }Gives text in uppercase
text-transformlowercasep{ text-transform: lowercase; }Gives text in lowercase
word-spacingPxp{ word-spacing: 10px; }Gives a wordspacing of 10px
letter-spacingPxp{ letter-spacing: 3 px; }Gives a wordspacing of 3px

Leave a Reply