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

Question

由于某些原因，当您添加 dislay: flex;.

时，:first-letter 伪元素与 :before 伪元素的组合不起作用

这应该有效，在 mozilla 他们说：

A combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. In that case, ::first-letter will match the first letter of this generated content.

参见：

:first-letter 没有 flexbox:

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

使用 flexbox:

如图所示，即使添加了 :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

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

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

Answer 2

来自the specification：

In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements. Note: A future version of this specification may allow this pseudo-element to apply to more display types.

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

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

Combination :before and :first-letter is not working when adding display:flex

css

css-selectors

pseudo-element