CSS pseudo-elements
CSS Pseudo elements
CSS pseudo elements are used to add some special effects to selectors.
Syntax
Pseudo element syntax:
CSS classes can also use pseudo elements:
: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:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>您可以使用:线伪元素添加特殊效果给第一行文本。</p>
</body>
</html>Run the program Try it
Note: "first-line" pseudo-element can only be used for block-level elements.
Note: The following properties can be applied 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
:first-letter pseudo-element
"first-letter" pseudo-element 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>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>Run the program to try it
Note: The "first-letter" pseudo-element can only be used for block-level elements.
Note: The following properties can be applied 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 class="article">A paragraph in an article</p>
The above example will make the first letters 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 rest of the text in the paragraph will be displayed in 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>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>Run the program to try it
CSS - :before pseudo-element
The ":before" pseudo-element can insert new content before the content of the element.
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:before {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>Run Try the program
CSS - :after pseudo-element
":after" The pseudo-element can insert new content after the content of the element.
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(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
</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 the program to try it
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 active links |
| :hover | a:hover | The state of placing the mouse on the link |
| :focus | input:focus | Select the element to have focus after input |
| :first-letter | p:first-letter | Select the first letter of each element |
| :first-line | p:first-line | select The first row of each element |
| :first-child | p:first-child | selector match belongs to The <]p> element of the first child element of any element is |
| :before | p:before | in each Insert content before the element |
| :after | p:after | Insert content after each element |
| :lang(language) | p:lang(it) | is the lang of the element Properties select a starting value |
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
