CSS `content`中能否使用多种字体样式？

Question

我已经设置了一个CSS元素来插入一些内容：

.foo:after {
  content: "Bold, italics";
}

我希望单词 "Bold" 以加粗字体显示，而单词 "italics" 则以斜体样式显示。我知道可以添加行：

font-weight: bold;
font-style: italics;

但这会使两个单词都加粗和斜体。如果我能够在内容字段中使用HTML元素，我会放置类似以下的内容：

content: "<strong>Bold</strong>, <em>italics</em>"

但不幸的是，这是不可能的。

是否有另一种方法可以实现此效果？理想情况下，不需要调用JavaScript，纯使用HTML/CSS即可实现。

- Alec Jacobson

---

我不认为这是（黑客攻击？），但我很想看看是否有人能够解决这个问题。 - Jared Farrish

根据1和2的答案，似乎是不可能的。它很可能会被标记为重复。 - Stickers

除了使用.foo:before { font-weight: bold; } 和 .foo:after { font-style: italics; }之外，我也很想知道这个。似乎只使用一个伪元素而不改变标记的方法是不可能的？ - s0rfi949

Answer 1

你有比'after'/'before'更多的伪元素，例如first-line或first-letter，如果你有一些想象力，也许可以在你的特定情况下使用它们：
w3schools 伪元素
但是，就像@s0rfi949指出的那样，在这前两个里面你不能再做更多了。

- Pedro Ferreira

Answer 2

如上所述，除非您添加:before和:after，否则不确定如何在没有JS的情况下完成。

.foo {
  float: left;
}
.foo:after {
  content: "Bold, ";
  font-weight: bold;
  float: right;
  margin-left: .5em;
  display: block;
}
.foo:before {
  content: 'Italic';
  font-style: italic;
  float: right;
  margin-left: .5em;
  display: block;
}

这段代码中到处都使用了浮动布局，但是它能正常工作:)

在这里查看：http://codepen.io/achoukah/pen/gpBopd

编辑:

这里有一个相同的版本，但使用了flex-box布局：

.foo {
  width: 100%;
  clear: both;
  display: flex;
}
.foo:before {
  content: "Bold, ";
  font-weight: bold;
  margin-left: .5em;
  order: 1;

}
.foo:after {
  content: 'Italic';
  font-style: italic;
  margin-left: .5em;
  order: 2;
}

- achoukah