Listado completo de tutoriales

57 - Pseudo-elementos: first-letter y first-line


Los pseudo-elementos a diferencia de las pseudo-clases afectan a parte de un elemento HTML y no al elemento completo.

Los primeros dos pseudo-elementos que veremos son first-letter y first-line.
El pseudo-elemento first-letter permite seleccionar la primer letra del contenido de un elemento HTML y aplicarle un estilo. Veamos por ejemplo si queremos que la primer letra de un párrafo aparezca con un tamaño de fuente mayor y otro color:

<p>Esto es la prueba del pseudo-elemento first-letter.</p>

Definimos:

p::first-letter {
  font-size:1.5rem;
  color:red;
}

Tenemos como resultado luego:

fist-letter

La sintaxis para definir un pseudo-elemento es distinta a las pseudo-clases ya que le antecedemos dos caracteres :: en lugar de uno.

Si no tuvieramos los pseudo-elementos este problema lo debemos resolver encerrando el primer caracter de un párrafo con el elemento HTML "span" y asignarle un estilo a dicho elemento. Luego gracias a esto tenemos un contenido del archivo HTML mucho más limpio.

first-line

El pseudo-elemento first-line permite seleccionar la primer línea de texto de un elemento HTML para aplicar un estilo.

Si tenemos la siguiente página:

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <p>El pseudo-elemento first-line permite aplicar
  un estilo a la primer linea del contenido de un 
  elemento HTML. Tengamos en cuenta que la cantidad
  de datos a mostrar en la primer línea depende del
  ancho de la ventana del navegador.</p>
</body>
</html>

estilos.css

p::first-line {
  text-decoration:underline;
}

Tenemos como resultado en el navegador:

fist-line

Tengamos en cuenta que si redimensionamos el navegador solo los caracteres de la primer línea aparecen subrayados:

fist-line

Retornar