Here is what I came up with after trying and thinking a bit of CSS/HTML principles:

I will be using display: inline-block; because ::first-letter requires a block for its content to work.

Please pay attention that I am using <span></span> tag and not <p></p> tag as the HTML W3 Consortium consider it as invalid html code. You can check your code about validity here

Take a look at the sandbox or at the live example here:

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

More info on tags here:

• see what is <q></q> tag is and how to use it;
• see more about what is <span></span> (e.g. text wrapper to any text you want to display and style depending on your needs);
• look through this to see what is the ::first-letter, how it works, and what is needed for it to work properly.

p::first-letter, it will always style the first character, to style W put a span element like W then style the span.

You can text-indent the paragraph and use a before positioned in absolute, but you have to manually set the indent that depends on text-size. It is not a super-clean solution: it is a "not so dirty" one.

p {
  text-indent: 5px;
}
p::first-letter {
  position:relative;
  color: red;
}

p::before {
  position:absolute;
  content: '"';
  left: 0;
}

<p>Welcome"</p>

simply float the first character and use :after not :before

p::first-letter {
  color: red;
}

p::after {
  content: '"';
  float:left;
}

<p>Welcome!"</p>