Aprende que son los pseudo-elementos de CSS y todas las genialidades que puedes hacer con ellos!
Desde CSS2 existen los llamados Pseudo elementos que nos permiten darle algunos efectos a nuestros selectores, en otras palabras podemos seleccionar ciertos elementos de nuestro documento que de otra forma sera complicado hacerlo, (amenos de que llenaras tu documento html con <span> y clases).
Los pseudoelementos se agregan a los selectores al igual que las pseudoclases, pero los pseudoelementos permiten agregar efectos, mientras que las pseudoclases agregan efectos dependiendo del estado.
Pseudo-elementos CSS
Comencemos por algo no tan nuevo pero que ha sufrido cambios, anteriormente en CSS2 teníamos pseudo-elementos, ahora con CSS3 la sintaxis ha cambiado, anteriormente usábamos los pseudo-elementos con : Ahora escribiremos los pseudo-elementos con :: al inicio de cada uno de ellos.
Anteriormente teníamos 4 pseudo-elementos ahora existen 5, asi que vamos a darles un repaso por si no los conocías.
::first-line Podemos darle estilos a la primera linea de texto de un elemento, por ejemplo un párrafo.
See the Pen pseudo-elemento ::first-line by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
Para el pseudo elemento ::first-line podemos usar las siguientes propiedades:
- Propiedades de fuente (font-size, font-family, etc)
- Propiedades de color
- Propiedades de fondo (background)
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter Podemos darle estilo a la primera letra de un párrafo.
See the Pen pseudo-elemento ::first-letter by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
Para el pseudo elemento ::first-letter podemos usar las siguientes propiedades:
- Propiedades de fuente (font-size, font-family, etc)
- Propiedades de color
- Propiedades de fondo (background)
- Propiedades de margenes exteriores (margin)
- Propiedades de margenes interiores (padding)
- border properties
- text-decoration
- vertical-align (solo si float esta establecido como «none»)
- text-transform
- line-height
- float
- clear
::first-child Podemos darle estilos al primer elemento hijo de nuestro elemento.
See the Pen pseudo-elemento ::first-child by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
::before Nos permite agregar contenido antes del elemento seleccionado.
::after Nos permite agregar contenido después del elemento seleccionado.
::selection El nuevo pseudo-elemento que incorpora CSS3 con el podemos definir estilos para los elementos de texto que sean seleccionados por el usuario con el raton (o el teclado)
Cabe destacar que para utilizar ::selection en firefox tenemos que agregarle su prefijo -moz- ya que este pseudo-elemento aun no esta soportado por este navegador web.
See the Pen pseudo-elemento ::selection by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
Sólo un pequeño apunte, :first-child es una pseudo-clase y no un pseudo-elemento. Los pseudo-elementos actúan como si insertásemos un nuevo elemento dentro del DOM y :first-child selecciona un elemento que ya está en el DOM, por tanto no es un pseudo-elemento.
Hola buenas , una pregunta , yo se que no se debe agregar estilos dentro del codigo html, pero queria saber como modificar el hover de un link, desde html usando css, sin utilizar el header, osea , seleccionar un elemento de un parrafo y desde la etiqueta misma agregar el hover, ojala puedan ayudarme,, gracias