CSS: después del selector

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: después del selector

Este tutorial de CSS explica cómo usar los selectores de CSS llamados :Trasero Con sintaxis y ejemplos.

describir

El selector CSS :after le permite agregar contenido después del elemento seleccionado.

sintaxis

La sintaxis para el selector :active CSS es:

element:after { style_properties }

parámetro o parámetro

elemento El tipo de elemento después del cual desea agregar contenido. style_properties Estilos CSS aplicados al contenido agregado.

notas

  • El selector :after es una pseudoclase que le permite agregar contenido después del elemento seleccionado.
  • Este elemento es un elemento en línea.

Compatibilidad del navegador

El selector CSS :after tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Internet Explorer 8+ (IE 8+)
  • Ópera 4+
  • Safari (WebKit)

ejemplo

Discutiremos el selector :after a continuación, explorando un ejemplo de cómo usar este selector en CSS para agregar contenido y aplicar estilos al contenido nuevo.

con

Etiqueta

Veamos un ejemplo de CSS :after donde aplicamos el selector :after a

Etiqueta.

CSS se ve así:

p:after { content: "The End"; color: red; font-size: 10px; }

HTML se ve así:

<div>
  <p>This is the first paragraph written by prograrmaplus.com.</p>
  <p>Here is the second paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así (el selector :después establecerá

estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS, el selector :after agrega el texto “The End” en letra roja pequeña después de cada párrafo.

con

Etiqueta

Veamos un ejemplo de CSS :after donde aplicamos el selector :after a

Etiqueta.

CSS se ve así:

div:after { content: "By prograrmaplus.com"; color: blue; font-style: italic; }

HTML se ve así:

<div>
  <p>This is the first paragraph in the first div.</p>
  <p>Here is the second paragraph in the first div.</p>
</div>
<div>
  <p>Finally, this is the first paragraph in the second div.</p>
</div>

El resultado se verá así: (El selector :después establecerá

estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS, el selector :after

Agregue el texto “Por prograrmaplus.com” en cursiva azul después de la etiqueta.

(Visited 8 times, 1 visits today)