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 |
Stylus Studio® 2010 XML Enterprise Suite raises the bar for productivity in XML development tools.
Millions of XML developers and data integration specialists turn to Stylus Studio's comprehensive and intuitive
XML toolset to tackle today's advanced XML data transformation and aggregation challenges.
|
- XML Pipeline Editor, Debugger and Code Generator
- DataDirect XML Converters
- XQuery Mapper, Editor, Debugger, and Profiler
- XSLT Mapper, Editor, Debugger, Designer, and Profiler
- Java and C# for .Net Code Generation
- XML Schema Designer With Documentation Generator
- XML Editor With Full XPath Integration
Download a free trial now
|
| 
