:before
y :after
En CSS tenemos los pseudo-elementos ::before
y ::after
los cuales permiten añadir información antes o después
de un elemento, pero no solo eso, también nos permiten dibujar en CSS. Por
ejemplo, con un solo div
y usando estos pseudo-elementos
podrías crear un corazón.
Primero hay que definir el elemento con el que vas a trabajar.
<div class="heart"></div>
El siguiente paso es dibujar un cuadrado, el cual será la base del corazón, y rotarlo 45 grados para que quede en forma de rombo.
.heart {
width: 50px;
height: 50px;
transform: rotate(45deg);
background: red;
position: relative;
}
Ahora, haciendo uso de los pseudo-elementos se crean dos cuadrados
adicionales que serán la parte superior del corazón y para redondearlos se
usa la propiedad de border-radius
al 50%
.
.heart::before, .heart::after {
content: "";
height: 50px;
width: 50px;
border-radius: 50%;
background: red;
position: absolute;
}
Por último, se posicionan correctamente para formar el corazón.
.heart::before {
top: 0;
left: -25px;
}
.heart::after {
top: -25px;
}