37

Some years ago, I used the tag to create a quote on my site (with big quotation marks).

Now I want to do the same thing, but it doesn't work anymore. The only thing I get are small "" and not the big ones.

How do I get the old, big ones back?

Thanks!

Matt
  • 1,893
  • 11
  • 33
  • 57

2 Answers2

76

I believe you're looking for something like this:

Blockquote example

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "\2014 \2009";
}

Threw the code into a JSFiddle for you to play with.

Found a tutorial about it from: http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/

EnigmaRM
  • 7,523
  • 11
  • 46
  • 72
  • Awesome! I tried to fix it in another way, but this is way better. Thanks, really, thanks! – Matt May 01 '13 at 22:37
29

Here's a pure CSS solution that adds both an large opening quote and large closing quote at the bottom right:

blockquote {
    font-family: Georgia, serif;
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}
<div>
    <blockquote>
        It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat.
    <footer>
        <cite>
            Teddy Roosevelt
        </cite>
    </footer>
    </blockquote>
</div>
Baodad
  • 2,405
  • 2
  • 38
  • 39