CSS :first-line pseudo-element
 Complete CSS Reference
Definition
The :first-line pseudo-element adds a special style to the first line of a text.
Examples
The "first-line" pseudo-element is used to add special styles to the first line
of the text in a selector:
p {font-size: 12pt}
p:first-line {color: #FF0000;font-variant:small-caps}
<p>Some text that ends up on two or more lines</p>
|
The output could be something like this:
|
Some text that ends
up on two or more lines |
In the example above the browser displays the first line formatted according
to the "first-line" pseudo element. Where the browser breaks the line
depends on the size of the browser window.
Note: The "first-line" pseudo-element can only be used with block-level
elements.
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.
Try-It-Yourself Demos
Make the first line special
This example demonstrates how to add a special effect to the first line of a text.
Make the
first letter and first line special
This example demonstrates how to add a special effect to the first letter and
the first line of a text.
Complete CSS Reference
 |
|
|
See why there are 20,000+ Ektron integrations worldwide.
Request an INSTANT DEMO or download a FREE TRIAL today. |
|
|
| 
HOME
Printer friendly page
