Css 在：：内容之后设置不同字符的样式

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

在这个例子中，我想要“↵" 显示为粗体，但不显示“按ENTER键”文本

---

如果按钮中没有其他文本，您可以将文本分为

之前的
和
之后的
：


。按钮{
字体大小：11px；
颜色：5a5b8d；
}
.按钮：：之前{
内容：“按回车键”；
}
.按钮：：之后{
内容：“↵";
字体大小：粗体；
}
如果按钮中没有其他文本，您可以将文本分为
之前的
和
之后的
：


。按钮{
字体大小：11px；
颜色：5a5b8d；
}
.按钮：：之前{
内容：“按回车键”；
}
.按钮：：之后{
内容：“↵";
字体大小：粗体；
}
这很疯狂，但这会起作用。工作示例：

试试这个：

HTML:

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

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

这很疯狂，但这会奏效。工作示例：

试试这个：

HTML:

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

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

可以考虑FRUBBOX和订单< /Cord>属性，以防您有内容，那么您将能够同时使用伪元素：

按钮{
字体大小：11px；
颜色：5a5b8d；
显示器：flex；
}
按钮：：之前{
内容：“按回车键”；
顺序：1；
填充：0 2px；/*flexbox擦除空白，因此我们添加填充*/
}
按钮：：之后{
内容：“↵";
填充：0.2px；
字体大小：粗体；
顺序：1；
}
<代码>某些内容< /代码> 您可以考虑FLUBBOX和订单< /Cord>属性，以防您有内容，那么您将能够同时使用伪元素：


按钮{
字体大小：11px；
颜色：5a5b8d；
显示器：flex；
}
按钮：：之前{
内容：“按回车键”；
顺序：1；
填充：0 2px；/*flexbox擦除空白，因此我们添加填充*/
}
按钮：：之后{
内容：“↵";
填充：0.2px；
字体大小：粗体；
顺序：1；
}
一些内容
不可能给出这种特殊的样式也不可能给出这种特殊的样式只有在按钮本身没有内容的情况下才有效。如果它是一个div而不是一个按钮呢？这会使它向左向右移动。呃，这个例子使用了一个div，答案是-如果没有内容…也许如果你想要一个fu我的解决方案是，你也应该在一个窗口中显示你的html标记，而不是让我们猜测你的html是什么is@Nifel如果此答案与您的要求冲突，请更新问题。如果您不告诉我们，没有人可以解决您的问题。只有当按钮本身没有内容时，这才有效。如果它是div而不是按钮，该怎么办uld左右移动。呃，这个例子使用了一个div，答案是-如果没有内容…也许如果你想要一个完整的解决方案，你也应该在一个文本中显示你的html标记，而不是让我们猜测你的html是什么is@Nifel如果此答案与您的要求冲突，请更新问题。没有人可以解决您的问题如果你不告诉我们的话，你会有。这太棒了。但它不会在所有浏览器上工作。真丢脸。它会先反转文本。然后使用CSS属性“第一个字母”来指向你想要加粗的图标。这太奇怪了。@Nifel我更新了它以反映你的编辑。“考虑到div中有内容。”“这太好了。但它不能在所有浏览器上运行。真丢脸。它先倒转文本。然后它使用CSS属性first letter来指向您想要加粗的图标。这太奇怪了。@Nifel我已经更新了它以反映您的编辑。“考虑到div中包含内容”