标签: drop-cap

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

我的博客中有一个问答页面,我想让问题以大问号开头,答案以大感叹号开头,即首字下沉。::first-letter使用伪元素和属性很容易实现这种效果initial-letter,就像这里提出的另一个问题(Drop-caps using CSS)中演示的那样,但问题是问号和感叹号不是字母,因此这种方法不起作用对于他们来说。有替代解决方案吗?

我的临时解决方案是使用::before伪类,但它只会使问号或感叹号变大,而不会使其成为首字下沉。

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

.question::before {
  content: '?';
  font-size: 3em;
  font-weight: 800;
  padding: 15px;
  display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)

html css pseudo-element drop-cap

2
推荐指数
1
解决办法
66
查看次数

标签 统计

css ×1

drop-cap ×1

html ×1

pseudo-element ×1