css伪类选择器::after{}| 青训营笔记

theme: fancy

这是我参与「第四届青训营 」笔记创作活动的第7天.

背景:

在青训营中我们组的仿掘金官网项目经大家商量后决定用vue去写,在写文章详情页的点赞UI的时候发现掘金的点赞的数值是after伪类选择器加上的.

然而作为前端小白的我连伪类选择器都有哪些都不知道,于是特意去学习了::after{}选择器然后记录下来.

正文:

::after (:after)

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.case1::after { /* content: attr(data-attr); */ /* content: var(--name); */ content: '小明'; color: black; }

语法

``` element:after { style properties } /* CSS2 语法 */

element::after { style properties } /* CSS3 语法 */ ```

简单样例

```

```

结果输出:

其中

.case1::after { /* content: attr(data-attr); */ /* content: var(--name); */ content: '小明'; color: black; 里的content为需要添加的内容.除此之外我们几乎可以用想要的任何方法给 content属性里的文字和图片的加上样式。例如上述代码中的color.

注意

当且仅当它们具有content属性值时，浏览器才会将这些元素呈现为“生成的内容” 。该值可以设置为空字符串：content: "";。
::after在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。默认情况下，此新元素将是内联元素。将元素插入DOM后，可以像修改其他元素一样对其进行修改。这给了我们很多控制权来获得各种。