The easiest way to Make Dropcap In Blog With Pseudo-element
Updated on April 07, 2016
Actually, many have posted how to make dropcap this blog. Dropcap is the initial letter in the first paragraph magnified as they are used in newspapers or like in the picture above.
However, most of these tutorials make dropcap by adding a class on the first letter of the paragraph. Surely this makes a bit of extra work when creating a post. Well this time I will share the easiest way to make dropcap with a pseudo-element that will change automatically all the first letters of the first paragraph of blog posts into dropcap.
Author: Adhy Suriady
Please copy the css code below and save the above code </head>
Well hopefully sharing this light can be beneficial for all of us, good luck.
However, most of these tutorials make dropcap by adding a class on the first letter of the paragraph. Surely this makes a bit of extra work when creating a post. Well this time I will share the easiest way to make dropcap with a pseudo-element that will change automatically all the first letters of the first paragraph of blog posts into dropcap.
Please copy the css code below and save the above code </head>
<b:if cond='data:blog.pageType == "item"'>Please adjust the size of the letters in the code font-size .
<style type='text/css'>
.post-body::first-letter {
color: red;
font-size: 70px;
float:left;
font-weight:bold;
line-height:.9em;
}
</style>
</b:if>
Well hopefully sharing this light can be beneficial for all of us, good luck.