English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Complete CSS Selector Reference Manual
Content inserted before each <p> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>/title>
<style>
p:before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Loli</p>
<p>I live by the sea</p>
<p><b>Notice:</b>/b> :before acts on IE8,DOCTYPE must have been declared.</p>
</body>
</html>Test and see ‹/›:before selector to insert content before the selected element.
usingcontent property to specify the content to be inserted.
The numbers in the table indicate the first browser version number that supports the attribute.
| selector | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 Part from8.0 | 3.5 | 3.1 | 7.0 Part from 4.0 |
Note: before in IE8Running in the middle, must declare <!DOCTYPE> .
CSS Tutorial: CSS Pseudo-elements
CSS Selector Reference Manual: CSS :after selector
Content and style inserted before each <p> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>/title>
<style>
p:before
{
content:"Read this -";
background-color:yellow;
color:red;
font-weight:bold;
}
</style
</style>
</head>
<body>
<p>My name is Loli</p>
<p>I live by the sea</p>
<p><b>Notice:</b>/b> :before acts on IE8,DOCTYPE must have been declared.</p>
</body>
</html>Test and see ‹/›