Javascript Css Después

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

El CSS:: antes del contenido de la selección se inserta antes de un elemento seleccionado. CSS: después del contenido de las inserciones después de un elemento específico. Estos selectores se usan comúnmente para agregar texto antes o después de un párrafo o enlace.

Al diseñar un sitio web, puede agregar contenido antes o después del contenido de una página. elemento. Por ejemplo, puede agregar una imagen antes de cada viñeta en una lista.

Aquí es donde entran:: antes y después:: elementos pseudo-CSS. Estos pseudo-elementos le permiten insertar contenido antes o después después del contenido de un elemento.

Este tutorial discutirá, haciendo referencia a ejemplos, cómo usar los pseudo-elementos:: before y after:: para decorar el contenido de una página web. Cuando termine de leer este tutorial, será un experto en el uso de:: antes y después:: pseudoelementos en CSS.

Pseudoelementos CSS

Un pseudo-elemento elemento es una palabra clave especial que le permite diseñar una parte específica de los elementos seleccionados por un selector de CSS. En este artículo, llamaremos a los pseudoelementos como selectores porque cada pseudoelemento es un selector

Los pseudoelementos son útiles cuando desea aplicar estilo a un elemento sin agregar CSS o ID de clases al elemento. Por ejemplo, si desea agregar una flecha ">" después de cada enlace en una página web, puede usar un pseudoelemento.

CSS ofrece una amplia gama de pseudoelementos. En particular:: primera línea,:: primera letra,:: antes y después::. A los efectos de este tutorial, nos centraremos en los dos últimos::::: antes y después.

Los pseudoelementos normalmente se representan mediante dos puntos (::). Aunque CSS3 admite el uso de la sintaxis de un solo punto (:) para declarar un pseudoelemento, la mejor práctica es usar la notación de dos puntos

Esto se debe a que la notación de dos puntos se usa para distinguir los marcadores de posición de pseudoclase.

CSS:: before element pseudo-element

It:: before pseudo- l "agrega contenido que aparece antes de un elemento en una página web A menudo, este elemento se usa para agregar texto antes de un párrafo

la sintaxis de:: before pseudo-element es: ..

El:: before selector se agrega después. el nombre del elemento al que desea aplicar el selector

Estos son los componentes principales del frente:: pseudo-elemento:

Si está interesado en obtener más información sobre cómo funcionan los selectores en CSS, lea nuestra guía Selectores CSS .

Tomemos un ejemplo para demostrar cómo funciona el:: antes del pseudoelemento.

Supongamos que queremos agregar un enlace emoji (Ôîó) antes de cada enlace en una página web de muestra. Podríamos hacer esto usando el siguiente código:

Nuestro código devuelve:

Capture d ` screen de 2020 12 09 08 00 16

Lo hicimos especificando una propiedad de contenido en nuestro archivo CSS, que se ve así:

contenido: "Ôîó";

Nuestra regla agregó un enlace emoji al comienzo de nuestra etiqueta que creamos

el valor del atributo "contenido" puede ser:.

No puede insertar un elemento HTML en el atributo de contenido.

el pseudoelemento CSS:: after

el pseudoelemento CSS:: after le permite agregar contenido inmediatamente después un elemento en una página web. Al igual que el selector:: antes, después:: se usa a menudo con enlaces o párrafos de texto.

La sintaxis de p seudo-elemento:: es después de lo siguiente:

the: : la sintaxis after es la misma que la sintaxis para el pseudo-elemento:: before.:: acepta after los mismos valores ‚Äã‚Äãpara el atributo "contenido" que discutimos anteriormente

:: after CSS Example

Suponga que está diseñando un elemento de enlace en un sitio para una panadería llamada Hansons Bakery. Este enlace debe mostrar el texto "Ir a la página Inicio Hansons Bakery". Nuestro enlace debe estar rodeado por un borde negro sólido de 1 píxel de ancho.

Después de nuestra etiqueta queremos un texto cuadro que aparecerá con el contenido Esta página nuestro menú de productos horneados. (Tenga en cuenta el espacio en blanco antes de la palabra "Esto".) Nuestro cuadro debe tener un color de fondo HTML naranja.

Podríamos hacer esto usando el siguiente código:

Nuestro código generó contenido similar a este:

< class figure = "wp-bloc-image"> Captura de 2020 12 09 08 00 47 1