CSS
Básico
CSS HomeCSS Introducción
CSS Sintaxis
CSS Su uso
CSS Fondo
CSS Texto
CSS Fuente
CSS Bordes
CSS Contorno
CSS Margen
CSS Padding
CSS Lista
CSS Tablas
Avanzado
CSS DimensionesCSS Efectos Visuales
CSS Ubicación
CSS Contenido/Numerac.
CSS Pseudo Class
CSS Pseudo Element
CSS Tipos de Medios
Ejemplos y Examen
CSS EjemplosCSS Examen
Guías de referencia
CSS Guía de ReferenciaCSS Colores
CSS Código de Colores
CSS Pseudo Elementos
<<< Pseudo Clases en CSS Tipos de Medios >>>
Pseudo Elementos con CSS
Los Pseudo Elementos nos permiten agregar alguna propiedad a un selector.
Su sintaxis es muy simple.
CSS cuenta con un total de 4 pseudo elementos.
- :first-line (primera línea)
- :first-letter (primera letra)
- :before (antes)
- :after (después)
Pseudo Elemento - :first-line
Nos permite agregar alguna propiedad especial a la primera línea de un texto.
p:first-line {text-decoration: underline; color: #FF0000}
<p>Este tutorial explica sobre los pseudo elementos en CSS, los tipos que hay y algunos de sus usos. Solo la primera línea del párrafo es la que se verá afectada por el pseudo elemento.</p>
Este tutorial explica sobre los pseudo elementos en CSS, los tipos que hay y algunos de sus usos. Solo la primera línea del párrafo es la que se verá afectada por el pseudo elemento.
:first-line permite solo las siguientes propiedades:
|
|
Pseudo Elemento - :first-letter.
Es usado para agregar una propiedad especial a la primera letra de un texto.
p:first-letter {font-style: italic; font-size: xx-large}
<p>El pseudo elemento :first-letter.......</p>
El pseudo elemento :first-letter.......
Observe que el primer carácter del texto es el único afectado por el pseudo elemento.
:first-letter permite solo las siguientes propiedades:
|
|
Pseudo Elemento - :before
Usamos :before cuando queremos poner algún contenido antes que un elemento.
p:before {content: url(logo.gif)}
<p> Virtualnauta es un sitio dedicado a tutoriales Web.</p>
Virtualnauta es un sitio dedicado a tutoriales Web.
Nota: debemos usar la propiedad content para agregar los contenidos deseados.
En este ejemplo, incorporamos el logo de Virtualnauta antes del texto.
Pseudo Elemento - :after
Al igual que :before , :after es usado para ingresar contenidos pero en este caso después del elemento.
p:after {content: url(logo.gif)}
<p>Virtualnauta es un sitio dedicado a tutoriales Web </p>
Virtualnauta es un sitio dedicado a tutoriales Web
Nota: debemos usar la propiedad content para agregar los contenidos deseados.
En el ejemplo podemos observar que el logo aparece después del párrafo.
Uso de varios pseudo-elementos juntos
Podemos usar varios pseudo elementos para un mismo selector.
p:first-line {color: #006699}
p:first-letter {font-size: xx-large}
<p>Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.</p>
Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.
En este ejemplo, observamos que tanto la primera línea del texto como la primera letra de la línea han sido afectadas por los pseudo elementos.
Combinación de Pseudo Elementos con clases
Los pseudo elementos pueden ser combinados con clases, como en este ejemplo.
h2.logo:before {content: url(http://www.virtualnauta.com/graficos/v.gif)}
<h2 class="logo">irtualnauta</h2>
irtualnauta
En este ejemplo, utilizamos una clase que denominamos "logo" para señalar en que título vamos a anteponer el logo de Virtualnauta.
Propiedades de los pseudo elementos
| Propiedad | Descripción | Ej. |
|---|---|---|
| :first-line | Primera línea de un texto. |  |
| :first-letter | Primera letra de un texto. | |
| :before | Inserta un contenido antes del elemento. No funciona en IE | |
| :after | Inserta un contenido después del elemento. No funciona en IE | |
¿No encuentras lo que buscas?
<<< Pseudo Clases en CSS Tipos de Medios >>>
Diseño Web
Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.
Copyright 2007 - 2009 by Martín Solomiak. Todos los derechos reservados.
Mapa del sitio
