[CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)

Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before ::after we can actually create and manipulate elements in the DOM that do not impact the content. While ::first-letter ::first-line ::selection ::placeholder allow us to target elements that do not have a specific DOM element.

 About 'blockquote':

blockquote {
  quotes: "“" "”" "‘" "’";
}

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

 

About ::first-line, ::first-letter:

p::first-line {
  color: green;
}

p::first-letter {
  font-size: 2em;
  float: left;
  line-height: 1.7em;
  padding: 0 .3em;
  font-weight: bold;
}

 

 

<div style="width:350px; margin: 0 auto; padding-top: 80px; padding-bottom: 80px;"> 
    
    <div class="testimonial-quote ">
        <div class="quote-container">
            <blockquote>
                <p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! </p>
            </blockquote>  
            <cite><span>Kristi Bruno</span></cite>
        </div>
    </div>   

</div>



.testimonial-quote {
    font-size: 14px;
}

.testimonial-quote blockquote {
    /* Negate theme styles */
    border: 0;
    margin: 0;
    padding: 0;

    background: none;
    color: gray;
    font-family: Georgia, serif;
    font-size: 1.25em;
    font-style: italic;
    line-height: 1.4 !important;
    margin: 0;
    position: relative;
    text-shadow: 0 1px white;
    z-index: 600;
}

.testimonial-quote blockquote * {
    box-sizing: border-box; 
}

.testimonial-quote blockquote p {
    color: #75808a; 
    line-height: 1.2 !important;
}

.testimonial-quote blockquote p:first-child:before {
    content: '\201C';
    color: #81bedb;
    font-size: 6em;
    font-weight: 700;
    opacity: .3;
    position: absolute;
    top: -.4em;
    left: -.2em;    
    text-shadow: none;
    z-index: -300;
}

.testimonial-quote cite {
    color: gray;
    display: block;
    font-size: .8em; 
}
  
.testimonial-quote cite span {
    color: #5e5e5e;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px white; 
}

.testimonial-quote {
    position: relative; 
}

.testimonial-quote cite {
    text-align: right; 
}
img {
  background-color: red;
}