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 40Prué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