CSS :first-line pseudo-element
 Complete CSS Reference
Example
Add a special style to the first line of a paragraph:
<html>
<head>
<style type="text/css">
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can use the :first-line pseudo-element to add a special effect to the
first line of a text.</p>
</body>
</html> |
Try it yourself »
|
Definition and Usage
The :first-line pseudo-element adds a style to the first line of a text.
Note: The following properties apply to the :first-line pseudo-element:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Pseudo-elements can also be combined with CSS classes:
p.article:first-line {color:#FF0000}
<p class="article">A paragraph in an article</p>
|
The example above will set the first line of all paragraphs with class="article" to red.
Browser Support
The :first-line pseudo-element is supported in all major browsers.
Related Pages
CSS tutorial: CSS Pseudo elements
Complete CSS Reference
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
| 
