I have tried various “answers” to this solution, but have been dissatisfied. So, I’m submitting my code for folks to kick around. I’ve found the only way for me to achieve this smoothly is by being an absolutist!

div.quote {
   margin-top     : 0.5em; 
   padding-top    : 0.5em;
   border-top     : var(--border);
   border-bottom  : var(--border);
   padding-bottom : 0.5em;
   margin-bottom  : 1em;
   line-height    : 1.3em;
   position       : relative;
}

div.quoteText {
   margin-bottom:2em;
}


div.quoteText:before {
   content     : "“";
   font-size   : 5em; 
   color       : forestgreen;
   position    : relative; 
   top         : 0.5em;
   line-height : 0.5em;
}

div.quote div.byLine {
   float    : right; 
   position : relative; 
   top      : -0.5em; 
}

div.quoteText:after {
   content     : "”";
   font-size   : 5em; 
   color       : forestgreen;
   line-height : 0.5em;
   position    : absolute; 
   bottom      : 0px; 
   bottom      : 0.3em;
   line-height : 0em;
}