伪元素::after和::before的使用

CSS 伪元素用于向某些选择器设置特殊效果，我们可以通过他来添加一些自定义的字符。为了与伪类相区分，我们在伪元素前面使用'::'。

::before和::after必须配合content 属性来使用，content用来定义插入的内容，content必须有值，它的值至少为空，

在默认的情况下伪元素的display值为inline，我们可以自己设置display-block等来修改它的display。

伪元素添加的内容不会出现在DOM中，不会改变文档的内容，不可以被复制，仅在css渲染层加入。

content可以的取值

1.string；2.attr();//当前元素属性。3.url/uri(content:(url("  "))。4.调用计数器。

实例：

1、仅用一个div实现放大镜的样式

html：

<div class="magnifier"></div>

CSS：

.magnifier {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid black;
position: relative;
}

.magnifier::after {
content: '';
display: block;
width: 8px;
height: 60px;
background-color: black;
position: absolute;
right: -22px;
top: 38px;
transform: rotate(-45deg);
}

2、自定义title属性：

html:

<div class="title" tit="hello world">hello</div>

CSS:

.title {
position: relative;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
}

.title:hover::after {
content: attr(tit);
width: 100px;
padding: 10px 10px;
border: 1px solid black;
border-radius: 5px;
position: absolute;
top: 32px;
color: red;

}