伪元素before和after用法

伪元素:before和:after是CSS中伪元素的一种，通过它们可以在文档中创建一些不同于常规文本或元素的内容。它们分别表示在元素内容前面和后面插入的虚拟元素。

:before和:after伪元素的使用方法如下：

1. 语法：

selector:before {
    content: "";
}

selector:after {
    content: "";
}

2. 属性：

- content：用于定义伪元素的内容，其取值可以是字符串、URL、计数器、属性值等。如果不设置该属性，则伪元素不会显示。

- display：用于定义伪元素的显示方式，如block、inline、inline-block等。

- position：用于定义伪元素的定位方式，如absolute、fixed等。如果设置了该属性，则需要配合top、bottom、left、right属性来定位。

3. 示例：

/* 在每个段落前插入一个引号 */
p:before {
    content: "“";
}

/* 在每个段落后插入一个引号 */
p:after {
    content: "”";
}

使用:before和:after伪元素可以为页面的装饰和交互增加很多可能性，如图标、箭头、背景形状等。