css之伪元素before和after

伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪类是弥补了CSS选择器的不足，用来更方便地获取信息。 伪元素有如下特点：

1. 伪元素不属于文档，所以js无法操作它
2. 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

:before和:after

:before和:after用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。

<p>wonyun!</p>
<style>
p:before{content: "hello "}
p:after{content: "you are handsome!"}
</style>

等价于下面的html结构：

<p>
    <span>hello </span>
    wonyun!
    <span> you are handsome!</span>
</p>

由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容，设置:before和:after时必须设置其content属性，否则伪元素就不起作用。那么问题来了，content属性的值可以有哪些内容呢，具体有以下几种情况：

• 字符串：字符串作为伪元素的内容添加到主元素中
• attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值

p:before {
    content: attr(data-content);
}
<p data-content="hello">wonyun!</p>

好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。

利用伪类:empty和伪元素实现一个占位符的效果

:empty：这个伪类会匹配没有内容的元素

<!-- 没有内容的元素，作用于empty -->
<div class="contents"></div>
/* 伪类empty 配合伪类before使用 */
.contents:empty::before {
    content: '暂无';
    color: gray;
}