Tutoriales en la Web

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:

Selector en cada uno de los casos.

CSS3 conserva estos pseudo-elementos aunque cambia su sintaxis. Para usarlos escribiremos “::” en lugar de “:”.

Code block

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

Code block

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.

Articulos relacionados:

Tags: css3, html5