Un abridor de revista con una gran inicial caída no cuesta casi nada: ::first-letter existe exactamente para esto, y se lee como una artesanía tipográfica muy interesante en lugar de un adorno de marketing.

.lede::first-letter {
  float: left;
  font-size: 4rem;
  line-height: 0.85;
  padding-right: 0.1em;
}

Reglas que aplica el navegador

  • La puntuación anterior se une a la letra: una comilla antes del primer glifo se incluye por diseño, por lo que la tapa nunca deja una marca solitaria.
  • Pintar, dimensionar, flotar y espaciar todo el trabajo; Las propiedades que afectan el diseño más allá de eso no coinciden entre los motores, así que mantenga la receta breve y pruébela una vez.
  • El elemento debe ser un contenedor de bloques; en elementos en línea, el pseudoelemento no se aplica, lo cual es un error muy agradable porque nunca funciona a medias.

La actualización de la plataforma que debe conocer

letra-inicial maneja la colocación y la sangría de forma nativa, sin puntos flotantes; declararlo detrás de una consulta de soporte y mantener la receta flotante como alternativa, de modo que ambas clases de navegador obtengan una respuesta deliberada en lugar de un accidente.

Una nota de honestidad para cerrar: ambas recetas son pura pintura, por lo que los lectores de pantalla no se ven afectados y el marcado permanece exactamente en un párrafo. Una decoración tan impresionante debería seguir siendo así de barata.