::first-letter选择器失效求助：父元素为块级仍无法生效

我尝试用CSS的::before和::first-letter伪元素实现类似DOI标识的效果，但::first-letter选择器始终无法生效。我也曾尝试不使用::before，通过在链接内添加额外标记的方式实现，依然无效。

原代码 #

CSS

.doi::before {
  display: inline-flex;
  content: 'doi';
  background-color: orange;
  border: 1px solid transparent;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  color: #fafafa;
}

.doi::before::first-letter {
  display: inline-block;
  color: #333 !important;
}

.doi {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

HTML

<a class="doi" href="https://doi.org/10.1016/some.journal.doi">10.1016/some.journal.doi</a>

问题原因 #

1. CSS规范不支持::before::first-letter这种嵌套伪元素组合，无法通过该选择器选中伪元素内的首字母。
2. 当::before伪元素设置为inline-flex时，::first-letter无法生效——它仅对块级元素、inline-block、table-cell等特定显示类型的元素生效。

解决方案 #

方法一：利用主元素的::first-letter选中伪元素首字母

将::before的display改为inline-block，并通过主元素的::first-letter选中伪元素内容的首字母，调整样式即可：

.doi::before {
  display: inline-block; /* 替换inline-flex为inline-block，兼容::first-letter */
  content: 'doi';
  background-color: orange;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  text-align: center; /* 用text-align+line-height实现文字居中 */
  line-height: 32px;
  font-style: normal;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  color: #fafafa;
}

/* 选中元素内容（包括::before生成的内容）的首字母 */
.doi::first-letter {
  color: #333;
}

.doi {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

方法二：双伪元素拆分字符控制（更灵活）

如果需要更精细的样式控制，可以用两个伪元素分别生成首字母和剩余字符：

.doi::before {
  display: inline-block;
  content: 'd';
  background-color: orange;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  color: #333;
}

.doi::after {
  display: inline-block;
  content: 'oi';
  position: absolute;
  margin-left: -24px; /* 调整位置到圆形标识内 */
  color: #fafafa;
  font-weight: bold;
  font-family: sans-serif;
}

.doi {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  position: relative; /* 让::after相对当前元素定位 */
}

内容的提问来源于stack exchange，提问作者PizzaIsLove