[SOLVED] First-letter pseudo-element not working properly with quote sign in CSS

First-letter pseudo-element not working properly with quote sign in CSS

I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.

I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:

If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.

If I wrote it with a space between them, none of them get bigger.

My question is: is there a way to get the " only to be bigger?

Here is the html code I used: <div class="pullquote-right">"this is a test</div>

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

Thanks.

Solution

An option would be to use the ::before and ::after pseudo elements.

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