Question

Hi guys! I require some CSS help styling my blockquote rule. My desired result is to have the opening quote above the quoted text, and the closing quote below the quoted text.

This image illustrates exactly what I require – site design

This is my current live WIP link – Live link

My CSS:

blockquote {
color: #e33e00;
font-style: italic;
font-family: GeoSlb712XBdBT;
padding:20px;
padding-left: 15px;
border-left: 3px solid #F63;


}

blockquote p:before {
content: '"';
font-size: 30px;
top:20px;
position:absolute;

}

blockquote p:after {
content: '"';
font-size: 30px;
}

If anyone can help I’d be very grateful.

Answer 1

DEMO

Look at the code I added ( it’s indented 4 spaces )

You need to add position: relative; to the blockquote p and then it was some absolute positioning on the :before and :after moving the :before up 15px and the :after down 30px.

resize the right side to make the quote grow and shrink and see that the quotes always stay on the top and bottom

and of course, you could do like 20px and 35px (or more) to add more space between the quotation marks and the <p> being quoted.

EDIT: Added the code below, additional code to fix the issue is indented 8 spaces

blockquote {
    color: #e33e00;
    font-style: italic;
    font-family: GeoSlb712XBdBT;
    padding:20px;
    padding-left: 15px;
    border-left: 3px solid #F63;
}


        blockquote p { position: relative; }

blockquote p:before {
content: '"';
font-size: 30px;
position:absolute;
        top:-15px;
        left:0px;
}

blockquote p:after {
content: '"';
font-size: 30px;
        position:absolute;
        bottom:-30px;
        left:0px;
}

​