CSS: después del selector

0

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.