41-Pseudo-elementos en css

Pseudo-elementos se usan para disenar partes especificas de un elemento

se pueden utilizar para:

• Aplicar estilo a la primera letra, o línea, de un elemento
• Insertar contenido antes o después del contenido de un elemento

Sintaxis

        selector::pseudo-element {
              property: value;
            }
    

...

pseudo-elemento de primera linea

estes pseudo-elementos se usan para dar estilo a la primera linea

por ejemplo podemos poner la primera linea de un parrafo en rojo

codigo css

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

Si escribes un parrafo con mas de una linea y pones los estilos anteriores, veras que la primera linea sale en rojo e las otras no

El pseudo-elemento ::first-line solo se puede aplicar a nivel de bloque elementos.

Se puede aplicar por ejemplo en:

• propiedades de la fuente
• propiedades del color
• propiedades de fondo
• espacio entre palabras
• espaciado de letras
• decoración de texto
• alineación vertical
• transformación de texto
• altura de la línea

En la version de CSS3 los pseudo-elementos se escriben con dos puntos como lo que estas viendo ::first-line

Pseudo-elemento primera letra

Los pseudo-elementos ::first-letter se usan para poner un estilo a la primera letra de un texto

en el seguiente ejemplo vamos dar estilo a la primera letra de todos los parrafos

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

Los pseudo-elementos ::first-letter solo se puede aplicar a nivel de bloque elementos.

en la primera letra podemos aplicar las seguientes propriedades:

• propiedades de la fuente
• propiedades del color
• propiedades de fondo
• propiedades de margen
• propiedades de relleno
• propiedades de borde
• decoración de texto
• alineación vertical (solo si "flotante" es "ninguno")
• transformación de texto
• altura de la línea
• flotar

Múltiples pseudo-elementos

Tambien se ueden combinar multiplo pseudo-elementos

el ejemplo seguiente da estilos a la priimera letra y a la primera linea

p::first-letter {
      color: #ff0000;
      font-size: xx-large;
    }
    
    p::first-line {
      color: #0000ff;
      font-variant: small-caps;
    }
    

Pseudo-elemento ::before

este pseudo-elemento se utiliza para insertar algun contenido antes del contenido del elemento

Nel seguiente ejemplo introducimos un gif antes del titulo h1

h1::before {
 content: url(smiley.gif);
}
    

Pseudo-elemento ::after

Lo mismo que el anterior, solo que ahora el contenido se inserta despues del elemento

El codigo seguiente introdus in gif depues del titulo h1

h1::after {
 content: url(smiley.gif);
}
    

paseudo-elemento ::marker

este elemento selecciona el marcadores de elementos de la lista.

::marker {
      color: red;
      font-size: 23px;
    }
    

El pseudo-elemento ::selection

Este pseudo-elemento pone los estilos en la parte selecionado por el usuario

::selection {
      color: red;
      background: yellow;
    }
    

Ir al indice