php - Add drop cap in CSS with dynamic Wordpress content

Question

I'm aiming to change the first character of my blog post in Wordpress using CSS. The content is being pulled in dynamically from a custom field. I have put a visual example, the css code and the HTML that the browser renders below. If there's anything else I can include, please let me know.

Solution jsfiddle.net/318otuhs + See comments below.

CSS

.dropcap p::first-letter {
  font-size: 4rem !important;
  color: #00ff00;
}


.dropcap p:first-child::first-letter {
  color: #00ff00;
  font-size: 4rem !important;
}

.dropcap {
  color: #00ff00 !important;
  font-size: 4rem !important;
}

HTML

<section id="blog-post">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-10">
                        <div class="checkbox mt-3 text-right">
                            <input type="checkbox" id="darkSwitch">
                            <label for="darkSwitch"><i class="far fa-lightbulb fa-lg"><i>Light switch</i></i></label>
                        </div>   
                            <div class="row my-5 justify-content-center">
                                <div class="col-sm-12 col-md-10 col-lg-8 mt-3">                                    
                                    <h2 class="subheader mt-3">Lorem Ipsum Dolor Amet.</h2>
                                        <div class="dropcap">
                                            <?php the_content(); ?>
                                        </div>

Full rendered HTML:

        <section id="blog-post">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-10">
                        <div class="checkbox mt-3 text-right">
                            <input type="checkbox" id="darkSwitch">
                            <label for="darkSwitch"><i class="far fa-lightbulb fa-lg"><i>Light switch</i></i></label>
                        </div>   
                            <div class="row my-5 justify-content-center">
                                <div class="col-sm-12 col-md-10 col-lg-8 mt-3">                                    
                                    <h2 class="subheader mt-3">Lorem Ipsum Dolor Amet.</h2>
                                        <div class="dropcap">
                                            <pre></pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. 

question from:https://stackoverflow.com/questions/65920503/add-drop-cap-in-css-with-dynamic-wordpress-content

Answer 1

Waitting for answers