Voici une petite astuce bien simple qui va vous permettre facilement de toujours afficher la première lettre du texte d'un bloc en majuscule. L'astuce semble peut-être un peu inutile ou anodine, mais en réalité, cette astuce est bien pratique et elle est très souvent utilisée afin de s'assurer d'avoir une mise en page efficace lors de l'affichage de texte. Donc voici comment effectuer ce truc grâce au pseudo-élément de CSS.
CODE :
.ma_classe: first-letter
EXEMPLE :
.message: first-letter
{
font-family: times, arial, sans-serif ;
font-style: italic ;
font-size: 4em ;
color: green ;
margin-right: 7px ;
float: left ;
}
<div class="message">lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc accumsan. Sed mattis libero eget dui. Sed accumsan, diam blandit malesuada laoreet, massa dui congue mauris, eu cursus justo mauris vitae lorem. Duis fermentum venenatis nisl. Aliquam felis augue, consequat vel, euismod eget, accumsan sit amet, est. In pharetra, eros vel eleifend tincidunt, massa risus scelerisque dui, id fermentum orci nisl ut nisl. Integer tincidunt nulla sed felis.</div>
C'est donc dire que le la première lettre du bloc ci-dessus soit le «l» sera affiché lors du rendu HTML par un «L» majuscule. L'astuce est simple non ?