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
 |
 |
 |
 |
|
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
 |
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
 |
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Utilize the extensive out-of-the box features or customize your site through Ektron CMS400.NET's open architecture |
 |
Promote collaboration in your organization through project workspaces where others can efficiently find information and work together |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
|
|
 |
TAKE THE VIDEO TOUR |
 |
or download a FREE TRIAL today. |
| 
HOME
Printer friendly page
