html - How Do I Make Large Quotation Marks Wrap Properly Around Quotations? -

i have simple div short testimonial inside. structure follows:

<div id="testimonial">this testimonial.<br>a multi-line testimonial.<br>with @ least 3 lines.</div> 

i want wrap testimonial in quotation marks, , size , color everything, i've added following css:

#testimonial {   font-size: 1.125rem; color: #434343; } #testimonial::before, #testimonial::after {   content: '“'; font-size: 3rem; line-height: 1rem; height: 1rem; color: #c9c8c8; }; 

the problem is, though i've applied both line-height , height rule quotation marks, remain larger lines of testimonial itself, messing , lines of testimonial.

here's codepen demonstrate what's happening: http://codepen.io/anon/pen/zxxzpe

how make large quotation marks take same vertical height testimonial text, looks neat, not messy?

turns out problem 2 issues in one.

first: line-height on quotation marks affects line height of last line of testimonial. such, line height " should minimized here (i fixed setting line-height quotations 1px).

second: because quotations superscripted, doesn't matter line-height is, quotation marks high up. best way resolve appears to set position relative on pseudo-elements ::before , ::after, , move them down 20 or pixels.

here's updated css pseudo elements:

#testimonial::before, #testimonial::after {   content: '"'; font-size: 3rem; line-height: 1px; position: relative;    bottom: -20px; color: #c9c8c8; }; 

see codepen demonstration here: http://codepen.io/anon/pen/wbbjlg