为什么：after元素被应用于父元素的每个子元素？

Question

我在我的div的ID上使用了一个伪元素。 问题是伪元素被添加到div的父元素的每个子元素中。 我希望伪元素只出现一次，因为它（根据我所说），只有一次，并且在具有ID的div之前。 我没有明确地向任何内部元素添加伪元素。 我的div的HTML代码如下：

<div id="contactUs" style="background-image: url(<?php echo CFS()->get( 'section4_background');?>">

<div class="container">


    <div class="row">

        <div class="col-sm-12">

            <h2><?php echo CFS()->get( 'section4_title1');?></h2>

            <h1 class="header"><?php echo CFS()->get( 'section4_title2');?></h1>

        </div>

    </div>

    <div class="row">

        <div class="col-sm-2"></div>

        <div class="col-sm-7">

            <?php echo do_shortcode('[contact-form-7 id="20" title="Formulario de contacto"]');?>

            <div class="row  bottom">

                <div class="col-sm-6">

                    <a href="tel:+1<?php echo CFS()->get( 'phone_number_link' );?>">

                        <img src="<?php echo bloginfo('template_url').'/'; ?>img/general/phoneIcon.png" class="img-fluid icon">

                        <p class="phone"><?php echo CFS()->get( 'phone_number' );?></p>

                    </a>

                </div>

                <div class="col-sm-6">

                    <a href="https://www.facebook.com/Vivesincancerchihuahua/" target="_blank">

                        <img src="<?php echo bloginfo('template_url').'/'; ?>img/general/facebookIcon.png" class="img-fluid icon">

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

我的伪元素是：

#contactUs :after{

content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;

}

result