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; }
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias