添加 display:flex 时，组合 :before 和 :first-letter 不起作用

Question

由于某种原因，当您添加 dislay: flex; 时，:first-letter 伪元素与 :before 伪元素的组合不起作用。

这应该可以工作，mozilla 他们说：

::before 伪元素和 content 属性的组合可能会在元素的开头插入一些文本。在这种情况下，::first-letter 将匹配此生成内容的第一个字母。

---

参见：

:first-letter 没有弹性框：

.box:before {
	content: "Hello World";
	font-size: 30px;
}

.box::first-letter{
	font-size: 150%;
}

.box {
	width:280px;
	height:280px;
	border:1px solid #c39f76;
	box-sizing:border-box;
  text-align: center;
  line-height: 280px;
}

<div class="box"></div>

---

使用弹性框：

正如所见，即使添加了:first-letter{ font-size: 150%; }，第一个字母的大小也没有增加。

.box:before {
	content: "Hello World";
	font-size: 30px;
}

.box::first-letter{
	font-size: 150%;
}

.box {
	width:280px;
	height:280px;
	border:1px solid #c39f76;
	box-sizing:border-box;
  display:flex;
  justify-content:center;
  text-align: center;
  line-height: 280px;
}

<div class="box"></div>

（仅在 chrome 上测试过）

Answer 1

来自the specification：

在 CSS 中，::first-letter 伪元素适用于块状容器，例如 block、list-item、table-cell、table-caption 和 inline-block 元素。 注意：本规范的未来版本可能允许此伪元素应用于更多显示类型。

如您所见，flexbox 容器实际上并未列出。它可能会在未来：

Answer 2

Flex 容器中的文本元素不是文本字符串，这是一个 flex 元素。

这就是::first-letter 不起作用的原因