是否可以在CSS`content`中使用（多个）字体样式？

Question

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

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

我希望用粗体字体重写“Bold”这个词，用斜体字体样式渲染“italics”这个词。我知道可以添加一行：

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

但这会使两个词都变得粗体和斜体。如果我could在内容字段中使用html元素，我会提出类似的内容：

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

但唉，这是不可能的。

还有另一种方法可以达到这个效果吗？理想情况下，无需调用javascript并纯粹使用html / css。

Answer 1

第一行或之前＆＃39;＆＃39;＆＃39;之前的其他伪元素<\ n> 第一个字母，有一些想象力，也许你可以用你的特殊情况：
w3schools Pseudo-elements
但是＆＃39; 在＆＃39;那些前2我认为你不能再做什么，比如@ s0rfi949指出。

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