大段引用引用符號外contentbox

Question

我有一個塊引用，其中引用符號與CSS內容生成，使用僞選擇出血：前和：後像這樣：

div.paragraph blockquote::before, div.paragraph blockquote::after { 
    font-size: 4em; 
    color: #999; 
    position: absolute; 
} 

div.paragraph blockquote::before { 
    content: "「201C"; 
    top: 0; 
    left: 0; 
} 

div.paragraph blockquote::after { 
    content: "」201D"; 
    bottom: 0; 
    right: 0; 
} 

這生成塊引用，看起來像這樣的：

我想要什麼，就是讓citationsymbols留在他們各自的盒子裏，使它們的基線將是一樣的塊引用中的文本。

我認爲這與citationsymbols自然基線有關，但也許有人可以詳細說明？

解決此問題的一種方法可能是爲citationsymbols提供相對字體大小的負邊距，但是我正在尋找更「正確」的解決方案，或者解釋爲什麼citationsymbols的行爲如此。

編輯：添加位置：相對; div.paragraph不能解決這個問題，因爲它已經有了位置：相對。

Answer 1

 <style> 
     div.paragraph{ 
     width:50%; 
     margin:auto; 
     } 
     div.paragraph blockquote{ 
     position:relative; 
     } 
     div.paragraph blockquote::before, div.paragraph blockquote::after { 
      font-size: 4em; 
      color: #999; 
     } 

     div.paragraph blockquote::before { 
      content: "「"; 
      top:-0.4em; 
      left: -0.6em; 
      position: absolute; 

     } 

     div.paragraph blockquote::after { 
      content: "」"; 
      right: 0; 
      position: absolute; 
     } 
     </style> 

     <div class='paragraph'> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
     <blockquote> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
     </blockquote> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
</div> 

看來你需要設置「div.paragraph塊引用」作爲相對的，被視爲前的父容器和內容之後

Answer 2

好吧，我明白你的問題，你有什麼要做的就是新增CSS爲：

div.paragraph {position:relative; } 

這定義上下文及其子