在 ::after 内容中设置不同的字符样式答案

【问题标题】：Style different characters inside ::after content在 ::after 内容中设置不同的字符样式
【发布时间】：2019-05-02 11:24:24
【问题描述】：

我只想在 ::after 的内容中设置一个字符的样式。可能吗？考虑到 div 里面有内容。

在本例中，我希望“↵”为粗体。但不是“按 ENTER”文本。

.div::after {
  content: "press ENTER ↵";
  font-size: 11px;
  color: #5a5b8d;
}

【问题讨论】：

不可能赋予这种特殊的风格

标签： css

【解决方案1】：

如果按钮中没有其他文本，您可以在before 和after 之间拆分文本：

.button {
  font-size: 11px;
  color: #5a5b8d;
}
.button::before {
  content: "press ENTER";
}
.button::after {
  content: " ↵";
  font-weight:bold;
}

&lt;div class="button"&gt;&lt;/div&gt;

【讨论】：

只有在按钮本身没有内容时才有效。
如果它是一个 div 而不是一个按钮呢？这会让它左右移动。
Err，示例使用了一个div
答案说明-如果没有内容...也许如果您想要一个完整的解决方案，您也应该在minimal reproducible example 中显示您的html标记，而不是让我们猜测您的html是什么
@Nifel 如果此答案与您的要求相冲突，请更新问题。如果您不告诉我们，任何人都无法解决您遇到的问题。

【解决方案2】：

这很疯狂，但这会奏效。工作示例：http://jsfiddle.net/Lf8xvcyq/1/

试试这个：

HTML：

<div class="button"></button>

CSS：

.button {
  /* Your normal CSS */
}

.button::first-letter {
  font-size: 11px;
  font-weight: bold;
  color: red;
}

.button::after {
  unicode-bidi:bidi-override;
  direction:rtl;
  content: "↵ RETNE sserp";
  font-size: 11px;
  color: blue;
}

【讨论】：

这太棒了。但它不适用于所有浏览器。耻辱。
它首先反转文本。然后它使用 CSS 属性首字母来定位你想要加粗的图标。
这太奇怪了。
@Nifel 我已更新此内容以反映您的编辑。 "考虑到 div 里面有内容"

【解决方案3】：

您可以考虑使用 flexbox 和 order 属性以防万一您有内容，那么您将能够同时使用这两个伪元素：

button {
  font-size: 11px;
  color: #5a5b8d;
  display:flex;
}
button::before {
  content: "press ENTER";
  order:1;
  padding:0 2px; /*flexbox erase whitespace so we add padding*/
}
button::after {
  content: "↵";
  padding:0 2px;
  font-weight:bold;
  order:1;
}

&lt;button &gt;some content&lt;/button&gt;

【讨论】：