How can I add (mock) buttons to my page using just CSS? I've been trying to display a span element but it's not showing up. I've experimented with setting its display to block and positioning it absolutely, but so far nothing has worked. Which method is generally preferred for achieving this effect?
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>