CSS :first-line pseudo-element
CSS :first-line pseudo-element
Description
The :first-line pseudo-element is used to add special effects to the first line of text.
The following properties apply to this pseudo-element:
- Font properties
- Color properties
- Background properties
- Word spacing
- Letter spacing
- Text decoration
- Vertical alignment
- Text transform
- Line height
- Clear
Example
The following example demonstrates how to use the :first-line pseudo-element to add a special effect to the first line of an element in a document.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head> <body>
<p class = "noline">
This line would not have any underline because this belongs
to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>
The following content will generate the following black link −
