Compatibility: IE5+ N6+
Version: Level 1
The :first-line pseudo-element allows you to apply style to the first line
of an element.
This is a very convenient way to enhance the appearance of the beginning of paragraphs
throughout a document.
CSS2 has four pseudo-elements: :after, :before, :first-letter, and :first-line.
Pseudo-elements allow you to create element-like structures which permit you to
apply style to parts of a document that normally cannot be accessed using HTML.
Specifically, you can add styled content before and after an element,
or effect the style of the first letter or first line of an element.
Only certain CSS properties can be applied using "first-line.
They are:
| background |
background-attachment |
background-color |
| background-image |
background-repeat |
clear |
| color |
font |
font-family |
| font-size |
font-style |
font-variant |
| font-weight |
letter-spacing |
line-height |
| text-decoration |
text-shadow |
text-transform |
| vertical-align |
word-spacing |
|
A pseudo-element is assigned to a selector via following syntax:
selector:pseudo-element {property: value; ...;}
A pseudo-element can also be used with the value assigned as a class to a selector:
selector.classvalue:pseudo-element {property: value; ...;}
Code:
<html>
<head>
<title>first-line test</title>
<style type="text/css">
p.red:first-line {color: #ff0000; font-weight: bold;}
</style>
</head>
<body>
<p class="red">
Only the first line is red and in bold.
<br>
The second line remains the default black.
<br>
Ditto for the third line and so on...
</p>
<p class="red">
When there is a sentence that is so long that is continues beyond the first line,
then only the first line is effect by the style.
No additional lines are effected.
</p>
</body>
</html>
Output:
Only the first line is red and in bold.
The second line remains the default black.
Ditto for the third line and so on...
When there is a sentence that is so long that is continues beyond the first line,
then only the first line is effect by the style.
No additional lines are effected.
|