CSS Pseudo-elements
CSS pseudo-elements are used to add special effects to some selectors.
Syntax
The syntax of pseudo-elements:
| selector:pseudo-element {property:value} |
CSS classes can also be used with pseudo-elements:
| selector.class:pseudo-element {property:value} |
The :first-line Pseudo-element
The "first-line" pseudo-element is used to add a special style to the first
line of a text.
In the following example the browser formats the first line of text in a p
element according to the style in 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
The :first-letter Pseudo-element
The "first-letter" pseudo-element is used to add a special style to the first letter of
a text:
Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-letter" pseudo- element:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p> |
The example above will display the first letter of all paragraphs with class="article",
in red.
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in
an xx-large font size. The rest of the first line will be blue, and in
small-caps. The rest of the paragraph will be the default font size and color:
Example
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
} |
Try it yourself »
|
CSS - The :before Pseudo-element
The ":before" pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:
CSS - The :after Pseudo-element
The ":after" pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:
Pseudo-elements
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Pseudo name |
Description |
CSS |
| :after |
Adds content after an element |
2 |
| :before |
Adds content before an element |
2 |
| :first-letter |
Adds a style to the first character of a text |
1 |
| :first-line |
Adds a style to the first line of a text |
1 |
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
