How to Decorate Text With CSS
Sometimes text need some kind of decoration to make it more clear, for example, an underline for a text links. Apparently these things look less important but in professional web design they counts. Here we text decoration options in CSS.
With the help of text-decoration property we can set different decoration styles for text content. By default the text have no decoration and links are decorated as underline, you can change these decorations according to your design requirements as follow.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<p>
<span style="text-decoration: underline;">
This text has a text-decoration attribute with a value of"underline".
</span>
</p>
<p>
<span style="text-decoration: overline;">
This text has a text-decoration attribute with a value of "overline".
</span>
</p>
<p>
<span style="text-decoration: line-through;">
This text has a text-decoration attribute with a value of "line-through".
</span>
</p>
<p>
<span style="text-decoration: none;">
This text has a text-decoration attribute with a value of "none".
</span>
</p>
Above code shows how to apply value of underline, overline, line-through, and none to text-decoration property.
Related posts
- How to Create Bar Graphs With CSS
- How to Make a Block Hover Effect for List Links
- How to Center Align a Div With CSS
- How to Write a CSS Rule
- How to Create Columns in CSS
- How to have Opaque Children in CSS
- How to Put Text Over Images With CSS
- How to set an image as a List Item Marker
- How to create a CSS Sprite Navigation
- How to Force Image to Div Size in CSS
No Response
Post your response