<div>
<h1>Drop Cap example with jquery custom plugin</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at congue libero, et posuere enim. Curabitur elit risus, finibus quis dictum eu, efficitur eget ante. Duis in lorem varius, sodales elit nec, faucibus nibh. Nulla porttitor rhoncus varius. Vestibulum commodo lectus sit amet justo auctor, nec interdum augue lobortis. Nullam cursus egestas lacinia. Nam suscipit, nunc ac porttitor blandit, lorem odio venenatis elit, in aliquam urna risus nec orci. Curabitur quam libero, sagittis id tincidunt vel, sodales non urna. Aliquam consequat ac elit ut interdum. Maecenas suscipit turpis non turpis tincidunt tempus. Pellentesque posuere rhoncus metus eget viverra.</p>
</div>.dropCap{
font-size: 2.4em;
font-weight: 700;
margin-right: 5px;
}(function ($) {
$.fn.dropCap = function () {
val = this.text();
first_letter = val.substring(0, 1);
dropCapLetter = `<span class='dropCap'>${first_letter}</span>`;
this.html(dropCapLetter + val.substring(1));
};
})(jQuery);
$("p").dropCap();
External CSS
This Pen doesn't use any external CSS resources.