Html 是否可以在CSS“内容”中使用（多种）字体样式？

我已经设置了一个CSS元素，通过以下方式插入一些内容：

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

我希望“粗体”一词以粗体字体显示，而“斜体”一词以斜体字体显示。我知道可以添加行：

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

但这将使这两个字加粗和斜体。如果我在内容字段中使用html元素，我会放置如下内容：

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

内容：粗体，斜体

但是，唉，这是不可能的

---

有没有其他方法可以达到这种效果？理想情况下，无需调用javascript，只需使用html/css。

上面已经提到过，但除非您添加

：before

和

：before

之后，否则不太确定如何在没有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;
}

它也包含到处浮动，但是，嘿！有效：）

请在此处查看：

编辑：

这里是相同的，但有弹性盒：

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

---

除了“after”/“before”之外，您还有其他的伪元素，比如第一行或第一个字母，通过一些想象，您可以在特定情况下使用它们：

---

但是“在”前2个选项中，我认为你不能再做更多，就像@s0rfi949指出的那样。

我不这么认为（hack？），但我很想看看是否有人能解决这个问题。根据答案和答案，这似乎是不可能的。除了使用

.foo:before{font-weight:bold；}

和

.foo:before{font-style:italics；}

之外，我也很想知道这个。似乎只执行一次psuedo而不更改标记是不可能的？