Un pseudoelemento CSS se utiliza para diseñar partes específicas de un elemento.
Por ejemplo, se puede utilizar para:
Aplicar estilo a la primera letra o línea de un elemento
Insertar contenido antes o después del contenido de un elemento
La sintaxis de los pseudoelementos:
selector::pseudo-element {
property: value;
}El pseudoelemento ::first-line se utiliza para agregar un estilo especial a la primera línea de un texto.
El siguiente ejemplo da formato a la primera línea del texto en todo <p> elementos:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
Nota: El pseudoelemento ::first-line solo se puede aplicar a nivel de bloque. elementos.
Las siguientes propiedades se aplican a ::first-line pseudoelemento:
propiedades de fuente
propiedades de color
propiedades de fondo
espaciado de palabras
espaciado de letras
decoracion-de-texto
alineación vertical
transformación de texto
altura de la línea
claro
Observe la notación de dos puntos dobles: ::first-line versus :primera línea
Los dos puntos dobles reemplazaron los dos puntos simples Notación para pseudoelementos en CSS3. Este fue un intento del W3C de distinguir entre pseudoclases y pseudoelementos.
Se utilizó la sintaxis de dos puntos tanto para pseudoclases como para pseudoelementos en CSS2 y CSS1.
Para compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para CSS2 y CSS1 pseudoelementos.
El pseudoelemento ::first-letter se utiliza para agregar un estilo especial a la primera letra de un texto.
El siguiente ejemplo da formato a la primera letra del texto en todo <p> elementos:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Nota: El pseudoelemento ::first-letter solo se puede aplicar a nivel de bloque. elementos.
Las siguientes propiedades se aplican al pseudoelemento ::primera letra:
propiedades de fuente
propiedades de color
propiedades de fondo
propiedades de margen
propiedades de relleno
propiedades de borde
decoracion-de-texto
alineación vertical (solo si "flotante" es "ninguno")
transformación de texto
altura de la línea
flotar
claro
Los pseudoelementos se pueden combinar con clases HTML:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
} Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
El ejemplo anterior mostrará la primera letra de los párrafos con class="intro", en rojo y en un tamaño más grande.
También se pueden combinar varios pseudoelementos.
En el siguiente ejemplo, la primera letra de un párrafo será roja, en un tamaño de fuente xx-grande. El resto de la primera línea será azul, y en letras minúsculas. El resto del párrafo tendrá el tamaño y color de fuente predeterminados:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
El pseudoelemento ::before se puede utilizar para insertar algún contenido antes del contenido de un elemento.
El siguiente ejemplo inserta una imagen antes del contenido de cada elemento <h1>:
h1::before
{
content: url(smiley.gif);
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
El pseudoelemento ::after se puede utilizar para insertar algún contenido después del contenido de un elemento.
El siguiente ejemplo inserta una imagen después del contenido de cada elemento <h1>:
h1::after
{
content: url(smiley.gif);
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
El pseudoelemento ::marker selecciona el marcadores de elementos de la lista.
El siguiente ejemplo aplica estilo a los marcadores de los elementos de la lista:
::marker {
color: red;
font-size: 23px;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
El pseudoelemento ::selection coincide con la parte de un elemento que es seleccionado por un usuario.
Las siguientes propiedades CSS se pueden aplicar a ::selection: fondo, cursor y esquema.
El siguiente ejemplo hace que el texto seleccionado sea rojo sobre un fondo amarillo:
::selection {
color: red;
background: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
Ejemplo
p::after
Descripción de ejemplo
Insertar algo después del contenido de cada elemento <p>
Ejemplo
p::before
Descripción de ejemplo
Insertar algo antes del contenido de cada elemento <p>
Ejemplo
p::first-letter
Descripción de ejemplo
Selecciona la primera letra de cada elemento <p>
Ejemplo
p::first-line
Descripción de ejemplo
Selecciona la primera línea de cada elemento <p>
Ejemplo
::marker
Descripción de ejemplo
Selecciona los marcadores de los elementos de la lista.
Ejemplo
p::selection
Descripción de ejemplo
Selecciona la parte de un elemento que es seleccionada por un usuario
Ejemplo
a:active
Descripción de ejemplo
Selecciona el enlace activo
Ejemplo
input:checked
Descripción de ejemplo
Selecciona cada elemento <input> marcado
Ejemplo
input:disabled
Descripción de ejemplo
Selecciona cada elemento <input> deshabilitado
Ejemplo
p:empty
Descripción de ejemplo
Selecciona cada elemento <p> que no tiene hijos
Ejemplo
input:enabled
Descripción de ejemplo
Selecciona cada elemento <input> habilitado
Ejemplo
p:first-child
Descripción de ejemplo
Selecciona cada elemento <p> que sea el primer hijo de su padre
Ejemplo
p:first-of-type
Descripción de ejemplo
Selecciona cada elemento <p> que sea el primer elemento <p> de su padre
Ejemplo
input:focus
Descripción de ejemplo
Selecciona el elemento <input> que tiene foco
Ejemplo
a:hover
Descripción de ejemplo
Selecciona enlaces al pasar el mouse sobre
Ejemplo
input:in-range
Descripción de ejemplo
Selecciona elementos <input> con un valor dentro de un rango específico
Ejemplo
input:invalid
Descripción de ejemplo
Selecciona todos los elementos <input> con un valor no válido
Ejemplo
p:lang(it)
Descripción de ejemplo
Selecciona cada elemento <p> con un valor de atributo lang que comienza con "it"
Ejemplo
p:last-child
Descripción de ejemplo
Selecciona cada elemento <p> que sea el último hijo de su padre
Ejemplo
p:last-of-type
Descripción de ejemplo
Selecciona cada elemento <p> que sea el último elemento <p> de su padre
Ejemplo
a:link
Descripción de ejemplo
Selecciona todos los enlaces no visitados
Ejemplo
:not(p)
Descripción de ejemplo
Selecciona cada elemento que no sea un elemento <p>
Ejemplo
p:nth-child(2)
Descripción de ejemplo
Selecciona cada elemento <p> que es el segundo hijo de su padre
Ejemplo
p:nth-last-child(2)
Descripción de ejemplo
Selecciona cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo
Ejemplo
p:nth-last-of-type(2)
Descripción de ejemplo
Selecciona cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo
Ejemplo
p:nth-of-type(2)
Descripción de ejemplo
Selecciona cada elemento <p> que es el segundo elemento <p> de su padre
Ejemplo
p:only-of-type
Descripción de ejemplo
Selecciona cada elemento <p> que sea el único elemento <p> de su padre
Ejemplo
p:only-child
Descripción de ejemplo
Selecciona cada elemento <p> que sea el único hijo de su padre
Ejemplo
input:optional
Descripción de ejemplo
Selecciona elementos <input> sin atributo "requerido"
Ejemplo
input:out-of-range
Descripción de ejemplo
Selecciona elementos <input> con un valor fuera de un rango especificado
Ejemplo
input:read-only
Descripción de ejemplo
Selecciona elementos <input> con un atributo de "solo lectura" especificado
Ejemplo
input:read-write
Descripción de ejemplo
Selecciona elementos <input> sin atributo de "solo lectura"
Ejemplo
input:required
Descripción de ejemplo
Selecciona elementos <input> con un atributo "requerido" especificado
Ejemplo
root
Descripción de ejemplo
Selecciona el elemento raíz del documento.
Ejemplo
#news:target
Descripción de ejemplo
Selecciona el elemento #news activo actual (se hace clic en una URL que contiene ese nombre de ancla)
Ejemplo
input:valid
Descripción de ejemplo
Selecciona todos los elementos <input> con un valor válido
Ejemplo
a:visited
Descripción de ejemplo
Selecciona todos los enlaces visitados