Volver al inicio

Ejemplos del blog 10 trucos de CSS que te van a sorprender

Dibujar con :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;
            }