Cómo usar antes y después de los pseudoelementos en CSS

Cómo usar antes y después de los pseudoelementos en CSS

Los pseudoelementos son uno de los selectores más avanzados que están disponibles para su uso en CSS. El objetivo principal de estos selectores es crear un estilo único, sin alterar el documento HTML que se utiliza para crear la estructura básica de una página web determinada.





Aquí se explica cómo usar pseudoelementos en CSS.





Pseudo-elementos comunes

Existe una extensa lista de pseudo-elementos que están disponibles para facilitar la vida de un desarrollador web. Algunos de estos pseudo-elementos incluyen:





  • Antes
  • Después
  • Fondo
  • Primera linea
  • Primera letra

En situaciones específicas, algunos pseudo-elementos demostrarán ser más adecuados que otros, pero lo único que permanece constante es la estructura general para usar cualquier pseudo-elemento.

software mejor pagado para windows 10

Ejemplo de estructura de pseudoelementos

|_+_|

Aunque puede usar un elemento HTML como selector, se recomienda que use una clase o una identificación para evitar apuntar a elementos no deseados en su diseño. El elemento, estilo o datos que le gustaría insertar en la posición deseada debe colocarse entre las llaves.



Los pseudoelementos de antes y después son los más populares de la lista y, dado que hay muchas formas prácticas de usarlos, no es difícil ver por qué.

Usando el pseudo-elemento Before en CSS

Aunque no es imposible, es difícil superponer imágenes con texto legible en CSS. Esto se debe principalmente a que la imagen y el texto ocuparían la misma posición en una página web.





Es relativamente fácil enviar una imagen al fondo de un grupo de texto , pero cuando esa imagen es demasiado brillante, tiende a abrumar el texto que está encima. En estos casos, el siguiente paso es intentar hacer que la imagen sea menos opaca usando la propiedad de opacidad.

El único problema es que dado que la imagen y el texto ocupan la misma posición, el texto también se volverá algo transparente.





Una de las pocas formas efectivas de resolver este problema es utilizando el pseudoelemento anterior.

Uso del ejemplo de pseudoelemento anterior

|_+_|

El código anterior se creó para usarse al unísono con la clase HTML landingPage a continuación. Como se muestra en el código anterior, al usar el pseudoelemento anterior, podemos apuntar a la imagen y usar la propiedad de opacidad antes de que la imagen se combine con el texto.

|_+_|

Esto dará como resultado que se coloque una superposición en la imagen y que se muestre un texto claro en la parte superior, como se muestra en la imagen a continuación:

Usando el pseudoelemento After en CSS

Un uso práctico del pseudoelemento after es ayudar en la creación de un formulario HTML. La mayoría de los formularios se crean con un conjunto de campos que requieren datos para que el formulario se envíe correctamente.

Una forma de indicar que un campo en un formulario requiere datos es colocando un asterisco después de la etiqueta de este campo. El pseudoelemento after proporciona una forma práctica de hacer esto.

Uso del ejemplo de pseudoelemento posterior

|_+_|

Al insertar el código anterior en la sección CSS de su formulario, se asegurará de que cada etiqueta que contenga la clase requerida esté seguida directamente por un asterisco rojo. El pseudoelemento after también es práctico en este ejemplo porque ayuda a separar el estilo de la estructura (que siempre es ideal en el desarrollo de software).

cómo identificar un número de teléfono

La propiedad del contenido

Como se muestra en el ejemplo anterior de pseudoelemento posterior, la propiedad de contenido es la herramienta que se utiliza para insertar contenido nuevo en una página web. Esta propiedad solo se usa con los pseudoelementos antes y después.

Es importante tener en cuenta que incluso si no hay contenido disponible para alimentar a la propiedad de contenido (como en el ejemplo anterior de pseudoelemento anterior), aún debe usar la propiedad de contenido dentro de los parámetros de antes o después. pseudo-elemento para que funcionen según lo previsto.

Ahora puedes usar pseudo-elementos en CSS

En este artículo, aprendió a identificar y utilizar pseudoelementos en sus programas CSS. Se le presentó a los pseudo-elementos antes y después y se le dieron formas prácticas de usar ambos. También pudo ver por qué la propiedad de contenido es necesaria para el uso exitoso de los pseudoelementos antes y después.

Cuota Cuota Pío Correo electrónico 10 ejemplos de código CSS simples que puede aprender en 10 minutos

¿Necesitas ayuda con CSS? Pruebe estos ejemplos básicos de código CSS para empezar, luego aplíquelos a sus propias páginas web.

Leer siguiente
Temas relacionados
  • Programación
  • Web Design
  • CSS
Sobre el Autor Kadeisha Kean(21 Artículos publicados)

Kadeisha Kean es desarrolladora de software Full-Stack y redactora técnica / tecnológica. Tiene la habilidad distintiva de simplificar algunos de los conceptos tecnológicos más complejos; produciendo material que puede ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).

Más de Kadeisha Kean

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse