Pseudoelementos en CSS
Afectan solo a una parte de ese elemento. Solo pueden aplicarse a elementos que tengan texto. Solo se pueden aplicar al último elemento dentro de la herencia que veremos posteriormente. Los pseudoelementos para CSS 2.1 son :first-letter, :first-line, :before y :after.
Pseudoelemento :first-letter
:first-letter: primera letra del texto del elemento.
Nota: Este pseudoelemento sólo acepta las propiedades: font, color, background, margin, padding, border, text-decoration, vertical-align (solo si float es 'none'), text-transform, line-height, float, clear.
Nota: Este elemento solo afecta a elementos de bloque: address, blockquote, center, frameste, dir, div, dl, dd, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li, tbody, td, tfoot, th, thead y tr.
<style>
p:first-letter
{
font-size:40px;
color:blue;
}
</style>
</head>
<body>
<h1>Cuento
<p >La primera letra de los párrafos es azul y tamaño 40
Pruébalo
El pseudoelemento :first-line
:first-line: primera línea del texto del elemento.
Nota: Este pseudoelemento sólo acepta las propiedades: font, color, background, margin, padding, border, text-decoration, vertical-align (solo si float es 'none'), text-transform, line-height, float, clear.
Nota: Este elemento solo afecta a elementos de bloque: address, blockquote, center, frameste, dir, div, dl, dd, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li, tbody, td, tfoot, th, thead y tr.
Ejemplo:
<style>
p:first-line
{
font-size:40px;
color:blue;
}
</style>
</head>
<body>
<h1>Cuento
<p>La primera línea de de los párrafos es azul y tamaño 40. El resto de líneas como no tienen estilo van a ser negras. </p>
Pruébalo
El pseudoelemento :before
:before: Inserta contenido antes del texto del elemento. Podemos añadir otros elementos además de texto como imágenes o la url de un enlace.
Nota: Para que funcione en IE8 hay que declarar el DOCTYPE.
<head>
<style>
p:before
{
content: "principio ";
}
p:before
{
content: url(http://www.juenti.com/images/juenti.gif);
}
</style>
</head>
<body>
<p>Hemos añadido una imagen y la palabra <b>principio</b> al principio nuestros párrafos.
</body>
Pruébalo
El pseudoelemento :after
:after: Inserta contenido después del texto del elemento. Podemos añadir otros elementos además de texto como imágenes o la url de un enlace.
Nota: Para que funcione en IE8 hay que declarar el DOCTYPE.
<style>
p:after
{
content: "final parrafo";
}
a:after
{
content: " (" attr(href) ")";
}
</style>
</head>
<body>
<p>Goolge hemos añadido la url del buscador entre paréntesis a su nombre y añadimos al final de los párrafos <b>final parrafo</b>.
</body>
Pruébalo