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
Learn how your website performs under various load conditions
 |
|
WAPT
is a load, stress and performance testing tool for websites and web-based applications.
In contrast to "800-pound gorilla" load testing tools, it is designed to minimize the learning
curve and give you an ability to create a heavy load from a regular workstation.
WAPT is able to generate up to 3000 simultaneously acting virtual users using standard hardware configuration.
Virtual users in each profile are fully customizable. Basic and NTLM authentication methods are supported.
Graphs and reports are shown in real-time at different levels of detail, thus helping to manage the testing process.
Download the free 30-day trial!
|
| 
HOME
Printer friendly page
