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

Posted 2023-03-05

【中文标题】是否可以在 CSS `content` 中使用（多种）字体样式？

【英文标题】：Is it possible to use (multiple) font styles within 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; 我也很想知道这个。似乎只做一个不改变标记的伪动作是不可能的？

【参考方案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;