Pseudonym-Element des ersten Buchstabens funktioniert nicht richtig mit Zitat-Zeichen in CSS

Question

Ich versuche, ein pull-quote div-Tag zu stylen. Ich möchte das Anführungszeichen " so stylen, dass es größer als der Rest der Aussage ist.

Ich dachte an das first-letter Pseudo-Element. Aber als ich das tat, funktionierte es nicht richtig. Hier sind die Fälle, die ich versuchte:

Wenn ich den Satz wie dieser schrieb:. "This is a test, (ohne Abstand zwischen den " und den T dann sowohl die "T groß erscheinen

Wenn ich es mit einem Raum schrieb zwischen sie, keiner von ihnen immer größer

Meine Frage lautet:. ist es eine Möglichkeit, die " nur zu bekommen größer zu sein

Hier ist der hTML-Code, den ich verwendet: <div class="pullquote-right">"this is a test</div>

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

Dank.

Answer 1

Eine Option wäre die Verwendung der :: vor und nach :: Pseudo-Elemente.

.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

Die Pseudoklasse des ersten Buchstabens bezieht sich auf den ersten Buchstaben und die direkt davor liegende Interpunktion. Referenz:

Ich denke, der einfachste Weg, um zu tun, was Sie wollen, könnte sein, um ein Span-Tag um die Interpunktion, die Sie größer und Stil, dass aus der CSS.

Oder Sie können diese Behelfslösung finden Sie unter: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

Answer 3

endete ich die beiden Antworten die Kombination von bis zu können div Tag verwenden und nicht neet extre <p></p> hinzufügen wie folgt:

.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>