In my blogging Q&A section, I wanted to add a unique touch by starting each question with a large question mark and each answer with a large exclamation mark as a drop cap. I tried using the ::first-letter pseudo-element along with the initial-letter property, but unfortunately, since question and exclamation marks are not considered letters, this approach did not work as expected. Is there a different method I could use to achieve this effect?
I attempted a workaround by using the ::before pseudo-class, which did make the punctuation marks larger, but did not achieve the desired drop cap effect.
Is there a way to make the question mark stand out within the paragraph, as opposed to just increasing its size?
.question::before {
content: '?';
font-size: 3em;
font-weight: 800;
padding: 15px;
display: inline-block;
}<div class="question">In my blogging Q&A section, I wanted to add a unique touch by starting each question with a large question mark and each answer with a large exclamation mark as a drop cap. I tried using the ::first-letter pseudo-element along with the initial-letter property, but unfortunately, since question and exclamation marks are not considered letters, this approach did not work as expected. Is there a different method I could use to achieve this effect?</div>