 |
Pseudo-elementos: first-letter y first-line
Puede usar el pseudoelemento ::first-letter para agregar un efecto especial al primer carácter de un texto
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:
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
font-size:2.5rem;
}
</style>
</head>
<body>
<p>Puede usar el pseudoelemento ::first-letter para agregar un efecto especial al primer carácter de un texto</p>
</body>
</html>
Definimos:
font-size:2.5rem;
color:red;
}
Tenemos como resultado luego:
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:
<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
text-decoration:underline;
}
Tenemos como resultado en el navegador:
Tengamos en cuenta que si redimensionamos el navegador solo los caracteres de la primer línea aparecen subrayados:
