Search code examples
htmlblockquote

Make big quotes with <blockquote>

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!

Solution

  • 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/