Apply before and after CSS rule on element's content - html

Question

I have the following code
<div class="testimonial_description_inner" style="width: 640px;">
We can’t solve problems by using the same kind of thinking we used when we created them.
<strong class="testimonial_author">- Einstein</strong>
<p class="testimonial_meta"></p>
</div>
I want to add an opening and closing quote only on the part of:
We can’t solve problems by using the same kind of thinking we used when we created them.
When I use it like this:
.testimonial_description_inner:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
.testimonial_description_inner:after {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
the closing quote is at the end of the whole div. How can I choose only the inner part to apply the CSS rule without changing the HTML code?

Answer 1

You could add the closing quote as a before pseudoelement on .testimonial_author.
I've used display: inline-block to line it up with the preceding text, but float: right might also work...
.testimonial_description_inner:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
.testimonial_author:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
display: inline-block;
}
<div class="testimonial_description_inner" style="width: 640px;">
We can’t solve problems by using the same kind of thinking we used when we created them.
<strong class="testimonial_author">- Einstein</strong>
<p class="testimonial_meta"></p>
</div>