Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Before After - Pseudo Element en CSS - Virtualnauta.com - Tutorial CSS

CSS Pseudo Elementos

Agrega propiedades especiales a la primera letra o a la primera línea de un texto. También agrega contenido delante o detrás de un elemento.


Pseudo Elementos con CSS

Los Pseudo Elementos nos permiten agregar alguna propiedad a un selector.

CSS cuenta con un total de 4 pseudo elementos.


Su sintaxis es muy simple.

selector:pseudo-elemento {propiedad:valor}

El Pseudo Elemento :first-line

El pseudo-elemento :first-line nos permite agregar una propiedad especial solo a la primera línea de un texto.

Sintaxis

<head>
<style="type:text/css">
selector:first-line {propiedad: valor}
</style>
</head>

Las posibles propiedades para el pseudo-elemento :first-line

background | clear | color | font | letter-spacing | line-height | text-decoration | text-transform | vertical-align | word-spacing

Ejemplo

Vamos a ver como actúa el pseudo-elemento :first-line.

Código
<head>
<style type="text/css">
p:first-line {color: red}
</style>
</head>

<body>
<p>La propiedad aplicada sobre el elemento p se cumplirá solo en la primera línea del párrafo, dejando el resto del mismo de color negro.</p>
</body>
Resultado

La propiedad aplicada sobre el elemento p se cumplirá solo en la primera línea del párrafo, dejando el resto del mismo de color negro.


El Pseudo-Elemento :first-letter.

El pseudo-elemento :first-letter es usado para agregar una propiedad especial solo a la primera letra de un texto.

Sintaxis

<head>
<style="type:text/css">
selector:first-letter {propiedad: valor}
</style>
</head>

Las posibles propiedades que podemos utilizar con :first-letter

background | border | clear | color | float | font | line-height | margin | padding | text-decoration | text-transform | vertical-align

Ejemplo

Vamos a ver un ejemplo del pseudo-elemento :first-letter.

Código
<head>
<style type="text/css">
p:first-letter {font-style: italic; font-size: xx-large}
</style>
</head>

<body>
<p>La propiedad aplicada sobre el elemento p se cumplirá solo en la primera letra del párrafo.</p>
</body>
Resultado

La propiedad aplicada sobre el elemento p se cumplirá solo en la primera letra del párrafo.


Pseudo Elemento :before

Usamos :before cuando queremos poner algún contenido antes que un elemento.

Sintaxis

<head>
<style="type:text/css">
selector:before {propiedad: valor}
</style>
</head>

Ejemplo

Vamos a ver un ejemplo del pseudo-elemento :before.

Código
<head>
<style type="text/css">
p:before {content: url(logo.gif)}
</style>
</head>

<body>
<p>Virtualnauta es un sitio dedicado a tutoriales Web.</p>
</body>
Resultado

Virtualnauta es un sitio dedicado a tutoriales Web.


Pseudo Elemento :after

Al igual que :before , :after es usado para ingresar contenidos pero en este caso después del elemento.

Sintaxis

<head>
<style="type:text/css">
selector:after {propiedad: valor}
</style>
</head>

Ejemplo

Vamos a ver un ejemplo del pseudo-elemento :before.

Código
<head>
<style type="text/css">
p:after {content: url(logo.gif)}
</style>
</head>

<body>
<p>Virtualnauta es un sitio dedicado a tutoriales Web.</p>
</body>
Resultado

Virtualnauta es un sitio dedicado a tutoriales Web.


Uso de varios pseudo-elementos juntos

Podemos usar varios pseudo elementos para un mismo selector.

Ejemplo

Código
<head>
<style type="text/css">
p:first-line {color: #006699}
p:first-letter {font-size: xx-large}
</style>
</head>

<body>
<p>Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.</p>
</body>
Resultado

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.

Ejemplo

Código
<head>
<style type="text/css">
h2.logo:before {content: url(logo.gif)}
</style>
</head>

<body>
<h2 class="logo">irtualnauta</h2>
</body>
Resultado
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. Ejemplo que afecta a la primer línea de un texto
:first-letter Primera letra de un texto. Ejemplo que afecta a la primer letra de un texto
:before Inserta un contenido antes del elemento. No funciona en IE Ejemplo que inserta un gráfico antes de un texto
:after Inserta un contenido después del elemento. No funciona en IE Ejemplo que inserta un gráfico después de un texto


<<< Pseudo Clases en CSS Contenido y Numeración automática >>>

En la Web