我正在尝试使用纯 CSS 在我的页面上绘制额外的(模拟(按钮，但我的span元素没有显示。我试过给它一个display: block;，我也试过绝对定位它，但似乎没有任何效果。在这两种方式中，哪种方法更好/最清晰？
header {
position: relative;
display: flex;
justify-content: space-around;
border-bottom: 6px solid black;
padding: 15px 0 10px 0;
}
img {
width: 43px;
height: 43px;
}
.red-button {
background: yellow;
width: 50px;
height: 50px;
}
header:before {
content: "";
position: absolute;
z-index: 1;
top: 74px;
width: 100%;
border-bottom: 6px solid maroon;
}
header:after {
content: "";
position: absolute;
top: 0;
width: 100%;
border-bottom: 6px solid $light-red;
}<body>
<header>
<img src="./assets/pokeball.svg" alt="pokedex">
<span className="red-button"></span>
</header>
</body>只需尝试将className替换为class。