如何将首字下沉样式应用于伪元素内容

Question

我的博客中有一个问答页面，我想让问题以一个大问号开头，答案以一个大感叹号，即首字下沉。使用

::first-letter

伪元素和

initial-letter

属性很容易实现这种效果，就像这里提出的另一个问题（Drop-caps using CSS）中所演示的那样，但问题是 问号和感叹号是不是字母，因此这种方法对它们不起作用。有替代解决方案吗？

我的临时解决方案是使用

::before

伪类，但它只会使问号或感叹号变大，而不会使其成为首字下沉。

我想知道是否有办法让问号沉入段落中，而不仅仅是变大。

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

Answer 1

这是浮点数仅存的少数有效用例之一。您可以通过缩小行高来减少底部间隙。

为了有趣和更容易维护，我从段落元素的数据属性中提取了删除字符值。这允许不同的字符而无需额外的 CSS。我还利用相同的属性使您的选择器更加通用。可重用性应该是所有代码的目标。

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