CODEWITHSUNDEEP
htmlcsspseudo-elementdrop-cap
ChaosHead
ChaosHead

Reputation: 47

How to apply drop cap styles to pseudo-element content

I have a Q&A page in my blog, and I wanted to make it so the question starts with a large question mark, and the answer with a large exclamation mark, that is a drop cap. Such effect is easy to achieve with ::first-letter pseudo-element and initial-letter property, like it was demonstrated in another question asked here (Drop-caps using CSS), but the problem is that question mark and exclamation mark are not letters, therefore this approach does not work for them. Is there an alternative solution for this?

My makeshift solution is to use the ::before pseudo-class, but it only makes the question mark or exclamation mark bigger, without making it a drop cap.

I wanted to know if there is a way to make the question mark sink into the paragraph, and not just be bigger.

.question::before {
  content: '?';
  font-size: 3em;
  font-weight: 800;
  padding: 15px;
  display: inline-block;
}
<div class="question">I have a Q&A page in my blog, and I wanted to make it so the question starts with a large question mark, and the answer with a large exclamation mark, that is a drop cap. Such effect is easy to achieve with `::first-letter` pseudo-element and `initial-letter` property, but the problem is that question mark and exclamation mark are not letters, therefore these approach does not work for them. Is there an alternative solution for this?</div>

Upvotes: 2

Views: 161

Answers (1)

isherwood
isherwood

Reputation: 61083

This is one of the few remaining valid use cases for floats. You can reduce bottom gap by shrinking line-height.

For fun and easier maintenance I've pulled the drop character value from a data attribute on the paragraph element. This allows distinct characters without extra CSS. I've also made your selector more generic, leveraging the same attribute. Reusability should be a goal in all code.

[data-dropchar]::before {
  content: attr(data-dropchar);
  font-size: 3em;
  line-height: 1em;
  font-weight: 800;
  padding-right: 15px;
  float: left;
}
<p data-dropchar="?">I have a Q&A page in my blog, and I wanted to make it so the question starts with a large question mark, and the answer with a large exclamation mark, that is a drop cap. Such effect is easy to achieve with `::first-letter` pseudo element and `initial-letter` property, but the problem is that question mark and exclamation mark are not letters, therefore these approach does not work for them. Is there an alternative solution for this?</p>

<p data-dropchar="I">I have a Q&A page in my blog, and I wanted to make it so the question starts with a large question mark, and the answer with a large exclamation mark, that is a drop cap. Such effect is easy to achieve with `::first-letter` pseudo element and `initial-letter` property, but the problem is that question mark and exclamation mark are not letters, therefore these approach does not work for them. Is there an alternative solution for this?</p>

Upvotes: 5

Related Questions