Html 首字下沉非字母字符

发布于02月13日

我在我的博客上有一个问答页面，我想让它成为一个问题以一个大问号开始，答案以一个大惊叹号开始，那就是一个大写字母.使用::first-letter个伪元素和initial-letter个属性很容易实现这种效果，就像在这里提出的另一个问题(Drop-caps using CSS)中演示的那样，但问题是question mark and exclamation mark are not letters, therefore this approach does not work for them.有没有其他的解决方案呢？

我的临时解决方案是使用::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>

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

Html 首字下沉非字母字符

推荐答案

Html相关问答推荐

如何只混合部分的背景而不是内容<>

如何将grid—template—column应用于元素中的子元素

在Apps Script中连接CSS与HTML

自动字间距以适应行CSS

需要帮助实现悬停动画效果

如何仅 Select 与子代CSS类匹配的第一个元素

仅在加载视频时显示描述(<；Video>；标签)

使用Cypress循环遍历不一致的父对象

如何使不断增长的div不溢出其包含固定div的父级

有没有办法移动占位符？

在显示 swift ui 之前加载下一个 YouTube 视频

jQuery 索引返回不正确的结果

如何将 HTML DateTime 转换为 Golang Time 对象

如何在 Flex 对齐内容框下显示隐藏按钮和文本

调整窗口大小时文本重叠导航栏

图像比预期宽的网格列

在