Pseudo-elementos

Se emplean para proporcionar un estilo a una parte específica de un elemento:

• Por ejemplo: la primera letra o línea de un elemento.
• También permiten añadir contenido antes, después o incluso dentro de un elemento.

Estilo para la primera línea y primera letra

            p::first-line {
            color: #ff0000;
            font-variant: small-caps;
            }

            p::first-letter {
              color: #ff0000;
              font-size: xx-large;
            }
                

Como arriba la primera línea tendrá un estilo diferente a las demás líneas del texto. Puede hacer más estrecha la página para ver este efecto.

            h3::before {
                content: url(check.png);
                margin-right: 5px;
            }
            h3::after {
                content: ".";
                margin-right: 5px;
            }
                

En este encabezado se inserta una imagen con el pseudo-elemento ::before y siempre al final un punto con ::after

Seleccione cualquier elemento y verá como se vuelve diferente

            ::selection{
                color:blue;
                background-color: yellow;
            }