:before和:after的使用方法

伪元素可以让我们很方便的加入一个样式，比如在字体前加一个icon，或者加一个下换线，可以不占一个元素的位置，使用起来也很方便，现在介绍一下使用的方法。
注意：:before和:after中的content是必加项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .test:before {
            content: "《";
            color:red
        }
        .test:after {
            content: "》";
            color:red
        }
    </style>
</head>
<body>
    <div class="test">乔布斯自传</div>
</body>
</html>

首先我们自定义一个div的标签，然后添加类名，在样式中为

.test:before {
		content:"《"
		color：red
	｝
.test：after｛
	 content:"》"
	 color:red
｝

就会在前后出现一个书名号。
在这里插入图片描述
然后我们就会在这个elements中看到在元素的上下文中分别有一个::fefore和::after，注意是它没有在div的外边而是在元素的里面，它默认的是 $\color{red}{disply:inline-block(但是我们尽量给它加上)}$ 所以是 $\color{red}{《乔布斯传》}$ 这样显示。
我们现在在代码中加上 $\color{red}{disply:block}$

       .test:before {
            display: block;
            content: "❤❤❤❤❤";
            color: red;
        }

        .test:after {
            display: block;
            content: "❤❤❤❤❤";
            color: red
        }

在这里插入图片描述
这样就是上下加内容，因为它是display:block。这样使用的方法节省了我们的标签，用于在css渲染中向元素逻辑上的头部或尾部添加内容，这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入，所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。