複数行の内容を次のように整列します：beforeと：afterの内容

Question

引用符を前に付けるためにCSSを使用したテキストがあります。テキストは新しい行に達すると、それは引用符記号の後に整列しないが、

div { 
 
    width: 240px; 
 
} 
 

 
p:before { 
 
    content: "“"; 
 
    font-size: 30px; 
 
} 
 

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

<div> 
 
    <p class="quote">This is some text that represents a quote that is rather long and splits into multiple lines</p> 
 
</div>

前に私はそれがこの

ようになりたいです

これは:beforeと:afterを使用して行うことができますか、別の方法を検討する必要がありますか？

Answer 1

:beforeとその親のpをそれぞれabsoluteとrelativeと位置付けてください。参照のために下のスニペットを確認してください。

div { 
 
    width: 240px; 
 
} 
 

 
p { 
 
    padding: 10px 15px; 
 
    position: relative; 
 
} 
 

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

 
p:after { 
 
    content: "”"; 
 
    font-size: 30px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: 5px; 
 
}

<div> 
 
    <p class="quote">This is some text that represents a quote that is rather long and splits into multiple lines</p> 
 
</div>

Answer 2

この

div { 
 
    width: 240px; 
 
} 
 
p:before, 
 
p:after { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
p:before { 
 
    content: "“"; 
 
    font-size: 30px; 
 
} 
 

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

<div> 
 
    <p class="quote">This is some text that represents a quote that is rather long and splits into multiple lines</p> 
 
</div>

をお試しください