如何在CSS中定位和設計blockquote

Question

嗨，大家好！我需要一些CSS幫助設計我的blockquote規則。我希望的結果是在引用文本上面有開頭引號，並在引用文本下面有結束引用。

此圖片顯示的正是我需要 - site design

這是我目前住在製品的鏈接 - Live link

我的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; 
} 

如果有人可以幫助我會非常感謝。

Answer 1

DEMO

看我說（它縮進4個空格）

您需要添加position: relative;到blockquote p，然後有人就:before和:after一些絕對定位移動:before了15px的代碼和下降30px的:after。

調整右側，使報價增大和縮小，看到引號永遠留在頂部和底部

，當然，你可以不喜歡爲20px和35px（或以上），以增加更多的空間在引號和<p>之間被引用。

編輯：添加下面的代碼，額外的代碼來解決這個問題縮進8個空格

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; 
} 

Answer 2

像這樣http://www.visibilityinherit.com/code/css-blockquotes-how-to.php。或者使用另一個顯示內嵌塊。我試圖張貼代碼，但不能正確縮進顯然。