css - 前端中伪元素的位置问题

问题描述

问 题

本来想用元素的伪元素弄一个正六边形的，但是发现了一个问题，如图：

1的位置是元素本体和before伪类的位置
2的位置是after伪类的位置。
代码如下：

<div class="hexagon"></div>
<style type="text/css">
.hexagon:before{
    width:100px;
    height: 173.2px;
    content: "";
    background-color: yellow;
/*    transform: rotate(-60deg);*/
    display: inline-block;
}
.hexagon {
    width: 100px;
    height: 173.2px;
    background-color: yellow;
    display: inline-block;
    margin:100px auto;
}
.hexagon:after{
    width:100px;
    height: 173.2px;
    content: "";
    background-color: yellow;
    /*transform: rotate(60deg);*/
    display: inline-block;
}


</style>

如果只有单一的伪类（after或before中的一个），在不设置position的情况下位置是重叠的（如图1）.

解决方案

当然要在父元素中用position:relative，伪元素中用position:absolute了，要不然你怎么可能让它们之间叠加形成一个图形呀

这篇关于css - 前端中伪元素的位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！