css中的before与after

before与after是css中的两个伪元素。所谓的伪元素就是一个虚假的元素，并插入到目标元素内容的之前与之后，我们一般可以通过css来控制它。其实before与after的编码是非常的简单的，就像我们在css中对他进行操作，比如设置他的背景颜色、设置它的大小、设置他的定位等等。只不过伪元素多加了一个content属性，如果我们对他不进行设置，那么我们设置的伪元素就会不起作用，我们可以设置content的内容为一个空字符串

content当我们添加的content为字符串的时候，字符串作为伪元素的内容添加到主元素中，这个字符串是直接原样输出内容，里面即使有html的转义符，也不会被转译。

#css代码
.a {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.a::before {
    content: "♥";
    color: red;
}
.a::after {
    content: "♥";
    color: blue;
}

/*html代码*/
<div class="a">
"hello"
</div>

从上面我们可以知道before与after是一个行内元素，我们可以添加属性display：block；来进行转换为块级元素。