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

【问题标题】：Is it possible to use (multiple) font styles within CSS `content`?是否可以在 CSS `content` 中使用（多种）字体样式？
【发布时间】：2015-10-15 17:08:22
【问题描述】：

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

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

我希望“粗体”一词以粗体字重呈现，而“斜体”一词以斜体字体样式呈现。我知道可以添加行：

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

但这会使两个单词都变成粗体和斜体。如果我 could 在内容字段中使用 html 元素，我会输入如下内容：

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

可惜那是不可能的。

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

【问题讨论】：

我不这么认为（黑客？），但我很想看看是否有人能解决这个问题。
根据1 和2 的答案似乎是不可能的。它可能会被标记为重复。
除了使用.foo:before { font-weight: bold; } 然后.foo:after { font-style: italics; } 我也很想知道这个。似乎只做一个不改变标记的伪动作是不可能的？

标签： html css css-content

【解决方案1】：

您确实有 other 伪元素，而不是 'after'/'before'，例如 first-line 或 first-letter，其中，有一些想象力，也许你可以在你的特殊情况下使用：
w3schools Pseudo-elements
但是“inside”前两个我认为你不能再做任何事情了，就像@s0rfi949 指出的那样。

【讨论】：

【解决方案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;
}

【讨论】：