Я пытаюсь нарисовать дополнительные (фиктивные) кнопки на своей странице с простым 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>