CODEWITHSUNDEEP
htmlcss
Nyoman
Nyoman

Reputation: 197

Style blockquote with pure css

I'm trying to style a blockquote to look like this:

how the blockquoute should look

At the moment it looks like this:

with whitespaces (it is supposed to be without the white spaces at the beginning of the blockquote

My HTML/CSS 

<blockquote><p>Lore ipsum...</p></blockquote>

blockquote {
margin: 1em 2em;
border-left: 1px solid #999;    
padding-left: 1em; }

blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}

blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
 }
/* without unnecessary font type/color attributes*/

I'm looking for something like position: relative; left: -15px;, but it should work much more reliable than this (more reliable means with different window sizes... oh and it should be pure css... ;-))

Do you know a solution problem that does not leave any unnecessary spaces behind?

Upvotes: 2

Views: 1143

Answers (2)

Jona
Jona

Reputation: 2147

With a position: relative on the blockquote you can easily position the pseudo element with position: absolute. See this jsfiddle demo http://jsfiddle.net/VZxhH/1/

blockquote {
    border-left: 1px solid #999;
    position: relative;
    padding-left: 1em;
    margin: 1em 2em;
}

blockquote:before {
    content: open-quote;
    position: absolute;
    font-size: 6em;
    left: -38px;
    top: -23px;
}

Upvotes: 1

Casey Robinson
Casey Robinson

Reputation: 1019

I added a float left and changed the top/left positioning declarations.

blockquote:before{
 content: open-quote;
 font-size: 6em;
 line-height: 0px;
 margin: 0px 5px 0px -40px;
 vertical-align: bottom;
 position: relative;
 float: left;
 top: .4em;
 left: -.15 em;
}

Here is the output. I didn't attempt to match your fonts and colors. sample output

Upvotes: 3

Related Questions