Esto es lo que se me ocurrió después de intentar y pensar un poco en los principios de CSS/HTML:

Usaré display: inline-block; porque ::first-letter requiere un bloque para que su contenido funcione.

Tenga en cuenta que estoy usando la etiqueta <span></span> y no la etiqueta <p></p> ya que el HTML W3 Consortium lo considera un código html no válido. Puedes comprobar la validez de tu código aquí

Eche un vistazo a la caja de arena o al ejemplo en vivo aquí:

 .quote span { display: inline-block; } .quote span::first-letter { color: red; }

 <q class="quote" cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921"><span>This is a great quote</span></q>

Más información sobre las etiquetas aquí:

• ver qué es la etiqueta <q></q> y cómo usarla;
• ver más sobre qué es <span></span> (por ejemplo, envoltorio de texto para cualquier texto que desee mostrar y estilo según sus necesidades);
• reviseesto para ver qué es la ::first-letter , cómo funciona y qué se necesita para que funcione correctamente.

p::first-letter, siempre aplicará estilo al primer carácter, para diseñar W, coloque un elemento de intervalo como W y luego diseñe el intervalo.

Puede text-indent al párrafo y usar un before posicionado en absoluto, pero debe configurar manualmente la sangría que depende del tamaño del texto. No es una solución súper limpia: es una solución "no tan sucia".

 p { text-indent: 5px; } p::first-letter { position:relative; color: red; } p::before { position:absolute; content: '"'; left: 0; }

 <p>Welcome"</p>

simplemente float el primer carácter y use :after no :before

 p::first-letter { color: red; } p::after { content: '"'; float:left; }

 <p>Welcome!"</p>