Woo Testimonials Quote Styling

Add this to functions.php to enable psuedo elements:

function jma_child_scripts()
{
    wp_add_inline_script('fontawesome', 'window.FontAwesomeConfig={searchPseudoElements:true}', 'before');
}
add_action('wp_enqueue_scripts', 'jma_child_scripts');

function jma_child_scripts()

{

wp_add_inline_script('fontawesome', 'window.FontAwesomeConfig={searchPseudoElements:true}', 'before');

}

add_action('wp_enqueue_scripts', 'jma_child_scripts');

The CSS:

.quote {
    margin-bottom: 20px;
}
.quote blockquote {
    font: 14px/20px italic Arial, Helvetica, sans-serif;
    padding: 8px;
    margin: 5px;
    text-indent: 40px;
    border-color: rgba(253, 186, 49, 0.5);
    position: relative;
}
.quote blockquote::before, .quote blockquote::after {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
    display: none;
}
.quote blockquote .fa-quote-left, .quote blockquote .fa-quote-right {
    color: rgba(253, 186, 49, 0.5);
    font-size: 1.8em;
    position: absolute;
    z-index: 10;
}
.quote blockquote::before {
    content: "\f10d";
}
.quote blockquote .fa-quote-left {
    top: 0;
    left: 10px;
    background-position: top left;
}
.quote blockquote::after {
    content: "\f10e";
}
.quote blockquote .fa-quote-right {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}
.quote blockquote p {
    padding-right: 20px;
    color: #113871;
    font-size: 1.5em;
    z-index: 20
}
.quote cite {
    font-size: 1.6em;
    color: #fdba31;
}

.quote {

margin-bottom: 20px;

}

.quote blockquote {

font: 14px/20px italic Arial, Helvetica, sans-serif;

padding: 8px;

margin: 5px;

text-indent: 40px;

border-color: rgba(253, 186, 49, 0.5);

position: relative;

}

.quote blockquote::before, .quote blockquote::after {

font-family: "Font Awesome 5 Free";

font-style: normal;

font-variant: normal;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

font-weight: 900;

display: none;

}

.quote blockquote .fa-quote-left, .quote blockquote .fa-quote-right {

color: rgba(253, 186, 49, 0.5);

font-size: 1.8em;

position: absolute;

z-index: 10;

}

.quote blockquote::before {

content: "\f10d";

}

.quote blockquote .fa-quote-left {

top: 0;

left: 10px;

background-position: top left;

}

.quote blockquote::after {

content: "\f10e";

}

.quote blockquote .fa-quote-right {

bottom: 0;

right: 0;

background-position: bottom right;

}

.quote blockquote p {

padding-right: 20px;

color: #113871;

font-size: 1.5em;

z-index: 20

}

.quote cite {

font-size: 1.6em;

color: #fdba31;

}

For Bubbles with “Tags”

.quote {
	margin-bottom: 20px;
}
.testimonials-text:after {
    width: 0;
    height: 0;
    content: " ";
    display: block;
    color: #f5f5f5;
    position: absolute;
    border-top-color: #f5f5f5;
    border-left-style: inset;
    border-right-style: inset;
    border-top: 22px solid;
    border-left: 0 solid transparent;
    border-right: 22px solid transparent;
    left: 80px;
    bottom: -20px;
}
.testimonials-text {
    padding: 15px;
    font-size: 14px;
    font-style: italic;
    background: #f5f5f5;
    position: relative;
    border: none;
    border-radius: 10px;
}

.quote {

margin-bottom: 20px;

}

.testimonials-text:after {

width: 0;

height: 0;

content: " ";

display: block;

color: #f5f5f5;

position: absolute;

border-top-color: #f5f5f5;

border-left-style: inset;

border-right-style: inset;

border-top: 22px solid;

border-left: 0 solid transparent;

border-right: 22px solid transparent;

left: 80px;

bottom: -20px;

}

.testimonials-text {

padding: 15px;

font-size: 14px;

font-style: italic;

background: #f5f5f5;

position: relative;

border: none;

border-radius: 10px;

}