Aprende que son los pseudo-elementos de CSS y todas las genialidades que puedes hacer con ellos!

Share on Pinterest
Comparte con tus amigos










Enviar

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

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

2 respuestas a “Tutorial Pseudo-elementos CSS”

  1. amram dice:

    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.

  2. Jose Garrido dice:

    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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso