Css中显示配对元素 |css3的兼容性怎么解决

在CSS中，大家可以使用伪元素选择器来匹配一个元素中的某个部分。如下代码所示，大家可以使用::before来匹配父元素的前面，使用::after来匹配父元素的后面。这种方式就是所谓的“显示配对元素”。

.parent{
position: relative;
}
.parent::before{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 10px;
height: 10px;
background-color: red;
}
.parent::after{
content: "";
position: absolute;
bottom: 0px;
right: 0px;
width: 10px;
height: 10px;
background-color: red;
}

在上面的代码中，大家给父元素设置了相对定位，也就是说父元素是“参照物”。然后使用::before和::after伪元素在父元素的前后分别添加一个小方块，让其呈现出上下两端配对的效果。

使用CSS的“显示配对元素”功能可以让大家更加方便地控制网页元素的样式和展示效果，增强网页的美观性和可读性。