CSS pseudo-elements

CSS Pseudo Elements

CSS pseudo elements are used to add some special effects to selectors.

Syntax

Pseudo element syntax:

selector:pseudo-element {property:value;}

CSS classes can also use pseudo elements:

selector.class:pseudo-element {property:value;}

:first-line pseudo Element

The "first-line" pseudo-element is used to set a special style to the first line of text.

In the following example, the browser will format the first line of text of the p element according to the style in the "first-line" pseudo-element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>可以使用:first-line伪元素为文本的第一行添加特殊效果。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
</p>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Note:" The first-line" pseudo-element can only be used on block-level elements.

Note: The following attributes can be applied to the "first-line" pseudo-element:

font attribute
color attribute
background attribute
word-spacing attribute
##letter- spacing attribute
text-decoration attribute
vertical-align attribute
text-transform attribute
line-height attribute
clear attribute

:first-letter pseudo The element

"first-letter" pseudo-element is used to set a special style to the first letter of text:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式！</p>
</body>
</html>

Run Example»Click the "Run Example" button to view the online example

Note: "first-letter" pseudo-element can only be used for block-level elements .

Note: The following attributes can be applied to the "first-letter" pseudo-element:

font attribute
color property
background property
margin property
padding property
border attribute
text-decoration attribute
vertical-align attribute (only if "float: none")
text-transform attribute
line-height attribute
float attribute
clear attribute

Pseudo elements and CSS classes

Pseudo elements can be combined with CSS classes:

p.article:first-letter {color:#ff0000;}

<p class="article">Article paragraph</p>

The above example will make the first letter of all paragraphs with class article turn red.

Multiple pseudo-elements

Can be used in combination with multiple pseudo-elements.

In the example below, the first letter of the paragraph will be displayed in red and its font size will be xx-large. The rest of the text in the first line will be blue and appear in small caps.

The remaining text in the paragraph will be displayed with the default font size and color:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>

Run Example »

Click the "Run Example" button to view the online example

CSS - :before pseudo element

":before" pseudo element can be used in the content of the element Insert new content ahead.

The following example inserts an image before each <h1> element:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

CSS - :after pseudo element

":after" pseudo element can be used in the element Insert new content after the content.

The following example inserts an image after each <h1> element:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

All CSS pseudo-classes/elements

Selectors	Example	Example description
:link	a:link	Select all unvisited links
: visited	a:visited	Select all visited links
:active	a:active	Select the active link
:hover	a:hover	The state of the mouse on the link
:focus	input:focus	The selected element has focus after input
:first-letter	p:first-letter	Select the first letter of each <p> element
:first-line	p:first-line	Select the first of each <p> element Line
:first-child	p:first-child	The selector matches the first element that belongs to any element The <]p> element of the child element
:before	p:before	in each <p> ; Insert content before the element
:after	p:after	Insert after each <p> element Content
:lang(language)	p:lang(it)	is< ;p> Select a starting value for the lang attribute of the element

← CSS pseudo-class

CSS navigation bar →