最初の文字の擬似要素が引用符で正しく動作しないCSS

Question

pull-quote divタグのスタイルを設定しようとしています。私は文の残りの部分よりも大きいので、引用符"をスタイルしたいと思います。

私はfirst-letter疑似要素を使用すると考えました。しかし、私がそうしたとき、それは正しく動作しませんでした。

私はこのような文を書いた場合：：ここに私が試したケースである。"Tが大きな表示され、両方のその後"とTの間には間隔をあけて（、"This is a testは

私はスペースの間でそれを書いた場合それら、それらのどれも大きな取得しない

私の質問です：？"だけ大きくなるために取得する方法はあり

ここで私が使用されるHTMLコードです：<div class="pullquote-right">"this is a test</div>

CSS：

.pullquote-right { 
display: inline-block; 
max-width: 350px; 
float: right; 
padding-left: 15px; 
margin-left: 25px; 
border-left: #3b5998; 
border-left-width: thick; 
border-left-style: solid; 
font-style: italic; 
color: darkgray; 
font-size:115%;} 

.pullquote-right::first-letter {font-size: 200%;} 

感謝。

Answer 1

オプションは、擬似要素の後に前と:: ::を使用することです。

.quote::before, 
 
.quote::after { 
 
    content: "\0022"; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    color: green; 
 
    vertical-align: -.3em; 
 
}

<p class="quote">This is a great quote</p>

Answer 2

最初の文字の擬似クラスは、その直前の最初の文字と句読点を指します。参考： https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

私は、あなたが望むことをする最も簡単な方法は、あなたがCSSからそれを大きくしたいと思う句読点の前後にスパンタグを置くことだと思います。

それとも、この回避策をチェックアウトすることができます：https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

Answer 3

は、私は次のようにextre <p></p>を追加するためにニートではないdivタグを使用してできるようにするには2つの答えを組み合わせることになった：

.pullquote-left { 
 
    display: inline-block; 
 
    max-width: 350px; 
 
    float: left; 
 
    padding: 20px; 
 
    margin-left: 15px; 
 
    border-left: #3b5998; 
 
    border-left-width: thick; 
 
    border-left-style: solid; 
 
    font-style: italic; 
 
    color: darkgray; 
 
    font-size: 110%; 
 
    background-color: white; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    text-align: center; 
 
} 
 
.pullquote-left::before { 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    content: "\201C"; 
 
}

<div class="pullquote-left">This is the final result.</div>