Question

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

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

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

Answer 1

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

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

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

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

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

<button >some content</button>

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

3 个答案: