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 |
Create a free Flash website with our simple, online web design editing platform. Stunning templates
and user-friendly tools make website building easy and fun.
Start Creating your free website now!
Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- 32-bit and 64-bit versions
- And much more!
Download a free trial today!
|
|
|
| 
