JMiur [E]

Además de pseudo-clases hay pseudo-elementos, su uso es similar, sirven para identificar con precisión determinadas cosas y crear efectos.

:first-line identifica la primera línea de un párrafo. Aquí, le decimos que esa primera línea estará en negrita y de color amarillo:
p.ejemplo:first-line {color: yellow; font-weight: bold;}

<p class="ejemplo"> ... el texto ... </p>

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


Esto, funcionará, sin importar el ancho del párrafo, esa primera línea es la que muestra el navegador, sea la que sea. Sólo tiene una restricción, como se refiere a textos, las propiedades que podemos usar son las que los afectan y cualquier otra, será ignorada:

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


:first-letter es similar pero, identifica la primera letra de un párrafo:
p.ejemplo:first-letter {color: yellow; font-family: Georgia; font-size: 30px;}

<p class="ejemplo"> ... el texto ... </p>

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


Por supuesto, ambas cosas pueden combinarse:
p.ejemplo:first-line {color:orange;}
p.ejemplo:first-letter {color:yellow;font-family:Georgia;font-size:30px;}

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


:before y :after pueden usarse para agregar cierto contenido a una etiqueta ¿qué contenido? textos, imágenes, sonidos:
div.ejemplo p:before {content: url(unaImagen);}

<div class="ejemplo"> ... un texto ... </div>
En este ejemplo, le agregaremos una imagen a un texto:

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


Y en este otro:
div.ejemplo p:after {content:'Texto agregado con CSS';}

<div class="ejemplo"><img src="unaImagen" /></div>
Le agregaremos un texto a una imagen:



REFERENCIAS:w3.org

10 comentarios:

Gore  

Hola JMiur, tiempo sin pasar por aca

queria compartir este sitio para post relacionados de una manera menos liosa por que hace todo xD

http://www.linkwithin.com/



Que estes bien

Responder
Gem@  

Vaya, leí entusiasmada hasta que llegué al final.
Suena a chiste eso de "no están implementados en Internet Explorer" es como decir que algo está riquísimo pero no podemos comerlo porque nos va a sentar mal :(

Responder
Jaime Trujillo Escobedo  

Muy buen post JMiur :D Saludines ;)

Responder
JMiur  

Aunque no estén implementados en IE (una cosa de locos) after y before son muy interesantes y vale la pena usarlos :D

Responder
Gem@  

Sin duda vale la pena, de todas formas si las usamos en Explorer se vería como un texto normal no quiere decir que se viera mal :)

Responder
JMiur  

Exacto, si lo usamos prudentemente, lo veo como una alternativa posible.

Responder
Manfenix  

Saludos JMiur.
No se si será casualidad pero desde que comencé a usar la nueva interfaz de blogger para editar los posts, el pseudo-elemento first-letter que estaba utilizando, ya no realiza el efecto esperado.
Alguna idea JMiur acerca de la causa de este problema?

JMiur  

Puede ser que eso ocurra porque la regla de estilo está definida par etiquetas P y lo que genera Blogger son etiquetas SPAN. Bastaría agregar esa etiqueta;

p.ejemplo:first-letter, span.ejemplo:first-letter {color: yellow; font-family: Georgia; font-size: 30px;}
p.LetraInicial:first-letter, span.LetraInicial:first-letter {color: #0000FF; font-family: Georgia; font-size: 30px;}

o simplificarlo quitando la etiqueta y dejando sólo la clase:

.ejemplo:first-letter {color: yellow; font-family: Georgia; font-size: 30px;}
.LetraInicial:first-letter, span.LetraInicial:first-letter {color: #0000FF; font-family: Georgia; font-size: 30px;}

Responder
Manfenix  

Problema resuelto, :)
Gracias JMiur.

JMiur  

Me alegra que se arreglara. Debe ser el editor de Blogger que cambia la forma de generar las etiquetas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR