这是我参与「第四届青训营 」笔记创作活动的第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 语法 */

简单样例

<template>
    <div class="afterdome">
        <div class="case1"  :style="{ '--color': color ,'--name':name}">凶手是</div>
    </div>
</template>

<script>
export default {
    name: 'Case',
    data() {
        return {
            name: "'小明'",
            color: "red",
        }
    },
}
</script>

<style>
.case1 {
    color: var(--color);

}

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

结果输出:

其中

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

里的content为需要添加的内容.除此之外我们几乎可以用想要的任何方法给 content属性里的文字和图片的加上样式。例如上述代码中的color.

注意

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