在:: after内容中设置不同字符的样式 [英] Style different characters inside ::after content

问题描述

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

I want to style only one character inside the content of an ::after. Is it possible? Considering that the div has content inside.

在此示例中，我希望↵为粗体。

In this example I want the "↵" to be bold. But not the "press ENTER" text.

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

推荐答案

如果没有其他文本在该按钮中，您可以在之前和之后之后的文本之间进行分割：

If there is no other text in the button, you could split your text in between the before and after:

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

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

这篇关于在:: after内容中设置不同字符的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！