Dropcap in Css using the ::first-letter pseudo-element selector
The ::first-letter CSS pseudo-element targets and styles the first letter of a block-level element, useful for creating drop caps or decorative effects.
Have you ever used the ::first-letter pseudo selector with font-size to style the first letter of a paragraph and it didn’t look right?
Instead of using font-size use this new simple yet useful css property.
The initial-letter property allows you to specify the size of the initial letter, in terms of how many lines it occupies, and the number of lines it should sink.
example:
.dropcap::first-letter {
color: red;
initial-letter: 3 3;
padding: 0px 10px;
}HTML:
<p class="dropcap">
Debitis venenatis pretium aliquip do cum labore eum enim! Diam! Class veniam.
Aliquam facilisi nisi nonummy cupidatat do voluptates diamlorem inceptos dui
magni parturient dignissimos aute eum consequat.
</p>Result:
