Bitácora Parcial 3

Pseudoelementos

Ideas principales

  • Pseudo-elementos permiten estilizar partes específicas de un elemento o añadir contenido a un documento.
  • ::before: Crea un pseudo-elemento antes del contenido del elemento seleccionado, usado para añadir contenido estético (con la propiedad content).
  • ::after: Crea un pseudo-elemento después del contenido del elemento seleccionado, también utilizado para añadir contenido cosmético (con la propiedad content).
  • los pseudo-elementos ::before y ::after son en línea (inline) por defecto, lo que significa que se muestran en la misma línea que el contenido del elemento.
  • los pseudo-elementos permiten agregar contenido visual adicional o estilizar partes específicas de un elemento sin alterar su estructura HTML.

Apuntes de la clase

Los pseudoelementos permiten seleccionar y dar estilo a elementos que no existen en el HTML, o que no son un simple elemento en sí. La sintaxis de los pseudoelementos está precedida de dos puntos dobles (::) para diferenciarlos de las pseudoclases, las cuales sólo tienen dos puntos (:).

::before

Se utiliza para insertar contenido antes del contenido principal de un elemento. Por ejemplo, se puede añadir un icono o una etiqueta decorativa antes del texto principal de un botón.

::after

Se emplea para añadir contenido después del contenido principal de un elemento. Por ejemplo, se puede agregar una sombra o un borde decorativo al final de un bloque de texto.

content

La propiedad content se usa junto con los pseudo-elementos :before y :after para generar contenido que se adjunta antes o después de un selector CSS.

Imagen referente a las posiciones

Resumen

Los pseudo-elementos en CSS se utilizan para estilizar partes específicas de un documento, a diferencia de las pseudo-clases que describen estados especiales de un elemento. Por ejemplo, ::first-line selecciona solo la primera línea del contenido de un elemento. Los pseudo-elementos ::before y ::after permiten agregar contenido estético antes o después del contenido de un elemento, respectivamente, usando la propiedad content. Ambos son en línea por defecto, lo que significa que se muestran junto al texto del elemento.