Pseudo-elementos en CSS 3
Posteado el 19. Sep, 2012 por tuto in HTML y CSS, HTML5
En la versión 2.1 contábamos con 4 pseudo-elementos:
- :first-line. Selecciona la primera línea.
- :first-letter. Selecciona la primera letra.
- :before. Nos posiciona al inicio del contenido de un elemento.
- :after. Nos posiciona al final del contenido de un elemento.
La siguiente imagen muestra dónde apuntaría el selector en cada uno de los casos:
CSS3 conserva estos pseudo-elementos aunque cambia su sintaxis. Para usarlos escribiremos “::” en lugar de “:”.
p::first-letter{
color:red;
}
p::first-line{
color:blue;
}
h1::after{
content:".";
}
h1::before{
content:"Ejemplo de ";
}
<div id="ejemplo">
<h1>pseudo-elementos</h1>
<p>Esto es un ejemplo usando pseudo elementos en CSS3 coloreamos de rojo la primera letra con first-letter, coloreamos de azul la primera línea con first-line, e incluimos en el título el texto "Ejemplo de" y "." con before y after respectivamente.
</div>
CSS3 añade un nuevo pseudo-elemento:
- ::selection. Selection referencia al texto seleccionado por el usuario.
Si usamos
p::selection{
background-color:blue;
}
Cuando seleccionemos el texto del párrafo, la selección tendrá color de fondo azul en vez del típico gris.
Bitacoras.com
19. Sep, 2012
Información Bitacoras.com…
Valora en Bitacoras.com: En la versión 2.1 contábamos con 4 pseudo-elementos: :first-line. Selecciona la primera línea. :first-letter. Selecciona la primera letra. :before. Nos posiciona al inicio del contenido de un elemento. :after. Nos posicio……