how to make text with quotations justify?

Question

I want to to justify text with quotations to be as follow:

 ‘‘  text text text text text text text text text text text text text text 

     text text text text text text text text text text text text text text  

     text text text text text text text text text text text text  ”

notice that all the lines are justified at the same level from the upper quotations, also the quotations should have different color and size than the text, so how I can do that with html & css ?

score 2 · Accepted Answer · answered Sep 16 '15 at 02:19

If you want to style the quotation marks differently from the rest of the text, your best bet is to mark them up separately. Better yet if you do this with ::before and ::after instead, and contain the text in a blockquote.

If you do this with generated content, and you don't float or position the ::before and ::after pseudo-elements, outdent the text using a negative text-indent by the amount needed to offset the opening quotes from the rest of the text, and add left padding to compensate for the outdentation.

How you implement this in HTML and CSS precisely depends on what you currently have, but you can easily accomplish this with just a simple blockquote and everything else done in CSS.

score 1 · Answer 2 · answered Sep 16 '15 at 02:23

you can do something like this with before and after pseudo-elements .

<blockquote>
      You know the golden rule, don’t you boy? Those who have the gold make the rules.
         You know the golden rule, don’t you boy? Those who have the gold make the rules.
    </blockquote>


blockquote {
    text-align:justify;
    padding:10px;    
}

blockquote:before {
    position:absolute;
    margin-left:-10px;
    content: open-quote;
    quotes: "\201C" "\201D" "\2018" "\2019";
}
blockquote:after {
    position:absolute;
    content: close-quote;
     quotes: "\201C" "\201D" "\2018" "\2019";
}

how to make text with quotations justify?

2 Answers2