Latest web development tutorials

CSS pseudo-elementos

CSS pseudo-elemento se utiliza para agregar algunos selectores de efectos especiales.


gramática

sintaxis pseudo-elemento:

selector:pseudo-element {property:value;}

clases CSS también pueden utilizar pseudo-elementos:

selector.class:pseudo-element {property:value;}


: Primera línea pseudo-elemento

"De primera línea" pseudo-elemento se utiliza para establecer un estilo especial a la primera línea de texto.

En el siguiente ejemplo, el navegador se basa en pseudo-elemento de "primera línea" en el estilo de la primera línea de texto formato de los elementos t:

Ejemplos

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Trate »

Nota: "de primera línea" pseudo-elemento sólo se puede utilizar para los elementos a nivel de bloque.

NOTA: Las siguientes propiedades se pueden aplicar a la "primera línea" pseudo-elemento:

  • propiedades de la fuente
  • propiedades de color
  • propiedades de fondo
  • word-spacing
  • espaciado entre letras
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • claro

: First-letter pseudo-elemento

"En primer lugar-letra" pseudo-elemento se utiliza para establecer un estilo especial a la primera letra del texto:

Ejemplos

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Trate »

Nota: "first-letter" pseudo-elemento sólo se puede utilizar para los elementos a nivel de bloque.

NOTA: Las siguientes propiedades se pueden aplicar a la "primera letra" pseudo-elemento:

  • propiedades de la fuente
  • propiedades de color
  • propiedades de fondo
  • propiedades de los márgenes
  • propiedades de relleno
  • propiedades de los bordes
  • text-decoration
  • vertical-align (sólo si "flotar" es "ninguna")
  • text-transform
  • line-height
  • flotador
  • claro

Los pseudo-elementos y clases CSS

Pseudo-elementos se pueden combinar con clases CSS:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

El ejemplo anterior hará toda clase que la primera letra del artículo párrafo se vuelve rojo.


Múltiples pseudo-elementos

Una pluralidad de pseudo-elementos se pueden combinar para usar.

En el siguiente ejemplo, el primer párrafo de la letra se mostrará en rojo, el tamaño de fuente es XX-Large. La primera línea del resto del texto será de color azul, y las pequeñas letras mayúsculas.

Los párrafos siguientes del texto en el tamaño de fuente predeterminado y el color de la pantalla:

Ejemplos

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Trate »


CSS -: antes del pseudo-elemento

": Antes de" pseudo-elemento puede insertar nuevo contenido en frente del contenido del elemento.

En el siguiente ejemplo para insertar una imagen en frente de cada elemento <h1>:

Ejemplos

h1:before
{
content:url(smiley.gif);
}

Trate »


CSS -: después de pseudo-elemento

": Después de" pseudo-elemento puede insertar nuevo contenido después de que el contenido del elemento.

Los siguientes ejemplos insertar una imagen después de cada elemento <h1>:

Ejemplos

h1:after
{
content:url(smiley.gif);
}

Trate »


Todo CSS pseudo-clases / elementos

selector ejemplo El ejemplo muestra
: enlace a:link Seleccionar todos los enlaces no visitados
: visited a:visited Seleccionar todos los enlaces visitados
: activa a:active Select es un enlace activo
: hover a:hover Ponga el ratón sobre el estado del enlace
: enfoque input:focus Después de seleccionar el elemento de entrada tiene enfoque
: First-letter p:first-letter Seleccione la primera letra de cada elemento <p>
: First-line p:first-line Seleccione la primera línea de cada elemento <p>
: First-child p:first-child <] P> selector de elementos coincide con cualquier elemento que pertenece al primer elemento secundario
: antes p:before Insertar contenido antes de cada elemento <p>
: después de p:after Insertar contenido después de cada elemento <P>
: Lang (idioma) p:lang(it) selección de atributos lang <p> elemento a un valor de inicio