CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

How would I add a closing quotation to this blockquote?

I'm so close, but need some help. Is there any way of adding a close quotation after the sentence, but before the <cite>?

Also, how would I center the entire blockquote on the page?

http://jsfiddle.net/3PTtv/

<blockquote>
   We came back to IBM because our previous provider was not as awesome.
   <cite>Jon Jones, Vice President at Google</cite>
</blockquote>

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

blockquote:before {
display: block;
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";
}

Upvotes: 0

Views: 3293

Answers (2)

JohanVdR
JohanVdR

Reputation: 2880

    blockquote {
        color: #616161;
        font-family: Georgia,serif;
        font-size: 18px;
        font-style: italic;
        line-height: 1.45;
        margin: 0.25em 0;
        padding: 0.25em 40px;
        position: relative;
        quotes: "\201C" "\201D";
        width: 500px;
        margin: 0 auto;
    }
    blockquote:before, blockquote:after {
        color: #7A7A7A;
        display: block;
        font-size: 80px;
        position: absolute;
    }
    blockquote:before {
        content: open-quote;
        left: 0;
        top: -20px;
    }
    blockquote:after {
        content: close-quote;
        bottom: -40px;
        right: 0;
    }

http://jsfiddle.net/nchqL/21/

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

just added this classes for closing quotes.

blockquote:after {
    display: block;
    content: "\201D";
    font-size: 80px;
    position: absolute;
    right: 20px;
    top: 40px;
    color: #7a7a7a;
    }
blockquote cite:after {
    content: "\2019 \2009";
    }

Here is the Demo. http://jsfiddle.net/kheema/3PTtv/3/

Upvotes: 7

Related Questions