Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end Front-end Q&A What are the css3 pseudo elements?

What are the css3 pseudo elements?

青灯夜游
青灯夜游
Mar 15, 2022 pm 03:25 PM
css3 Pseudo element

css3 pseudo-elements include: 1. "::after", which can insert some content after the specified element; 2. "::before"; 3. "::first-letter"; 4. " ::first-line"; 5. "::selection"; 6. "::placeholder".

What are the css3 pseudo elements?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Pseudo-element is a keyword appended to the end of the selector. Through pseudo-element, you can define styles for specific parts of the selected element without using the element's ID or class attributes. For example, through pseudo-elements you can set the style of the first letter in a paragraph, or insert some content before or after the element, etc.

In CSS1 and CSS2, the use of pseudo-elements is the same as pseudo-classes, and a colon : is connected to the selector. However, in CSS3, the use of single colon for pseudo elements was changed to double colon :: to distinguish pseudo classes and pseudo elements. Therefore, it is recommended to use double colons instead of single colons when using pseudo-elements. 

selector::pseudo-element {
    property: value;
}
Copy after login

Among them, selector is the selector, pseudo-element is the name of the pseudo element, property is the property in CSS, value is the value corresponding to the attribute.

CSS provides a series of pseudo-elements, as shown in the following table:

##::first -linep::first-line Matches the first line of content in each

element

::selectionp::selectionMatch the part of the element selected by the user::placeholderinput::placeholderMatch the placeholder attribute of each form input box (such as )

1. ::after

伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。

下面通过一个示例来演示伪元素 ::after 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::after {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::after {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::after {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::after</p>
    <p class="two">伪元素 ::after</p>
    <p class="three">伪元素 ::after</p>
</body>
</html>
Copy after login

运行结果如下图所示：

What are the css3 pseudo elements?

2. ::before

伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。

下面通过一个示例来演示伪元素 ::before 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::before {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::before {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::before</p>
    <p class="two">伪元素 ::before</p>
    <p class="three">伪元素 ::before</p>
</body>
</html>
Copy after login

运行结果如下图所示：

What are the css3 pseudo elements?

3. ::first-letter

伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-letter 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-letter{
            font-size: 2em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>伪元素 ::first-letter</p>
</body>
</html>
Copy after login

运行结果如下图所示：

What are the css3 pseudo elements?

4. ::first-line

伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-line 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line{
            font-size: 1.5em;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。</p>
</body>
</html>
Copy after login

运行结果如下图所示：

What are the css3 pseudo elements?

5. ::selection

伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。

下面通过示例来演示伪元素 ::selection 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。 </p>
</body>
</html>
Copy after login

运行结果如下图所示：

What are the css3 pseudo elements?

6. ::placeholder

伪元素 ::placeholder 用来设置表单元素（、

Pseudo-elementsExampleExample description
::afterp::afterInsert content after each

element

::beforep::beforeInsert content before each

element

: :first-letterp::first-letter Matches the first letter of the content in each

element