html - 是否可以在 CSS `content` 中使用(多种)字体样式？

Question

我已经设置了一个 CSS 元素来插入一些内容，方法是:

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

我希望“粗体”一词以粗体字体呈现，“斜体”一词以斜体字体呈现。我知道可以添加行:

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

但这会使单词变成粗体和斜体。如果我could在内容字段中使用 html 元素我会放一些类似的东西:

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

可惜那是不可能的。

还有其他方法可以达到这个效果吗？理想情况下不调用 javascript 并纯粹使用 html/css。

Answer 1

上面已经提到了，但是除非你添加一个 :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;
}

它也到处都包含 float ，但是，嘿!它有效:)

在这里查看: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;
}