是否可以在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.

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

它还到处都有花车，但是，嘿！有用：）

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

编辑：

与此相同，但使用了弹性盒：

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