如何在SCSS的:after伪元素content中混合样式添加斜体[sic]

因为CSS伪元素的content属性没法给部分文本单独设置样式（单个伪元素的文本样式是统一的），所以我们得把[ sic ]拆成几个部分，用多个伪元素分别控制样式。这里给你两种可行的SCSS方案：

方案一：简洁实现（整体斜体） #

如果可以接受括号和sic一起斜体，代码非常简单：

span {
  &.sic {
    &:after {
      content: " [ sic ]";
      font-style: italic;
      margin-left: 0.2em;
    }
  }
}

这样会在错误词汇后直接添加斜体的[ sic ]，视觉上也符合大多数场景的使用习惯。

方案二：精确控制（仅sic斜体） #

如果要求括号必须保持正常样式，只有sic斜体，我们可以用两个伪元素拆分结构来实现：

span {
  &.sic {
    position: relative;
    margin-right: 1.2em; // 给右括号预留位置

    // 添加左括号（正常样式）
    &::after {
      content: "[ ";
      font-style: normal;
      margin-left: 0.2em;
    }

    // 添加斜体的sic和右括号
    &::before {
      content: " sic ]";
      position: absolute;
      left: 100%;
      top: 0;
      font-style: italic;
    }
  }
}

这里用绝对定位把斜体的sic和右括号放在左括号后面，虽然右括号会跟着轻微斜体，但实际显示效果差异很小，基本能满足你对样式的要求。

如果完全不能接受右括号斜体，那只能稍微调整HTML结构（比如在.sic内部加一个<span>专门包裹sic），但要是想纯CSS/SCSS实现，上面的方案就是最优解啦。

内容的提问来源于stack exchange，提问作者PrismaPixel Studios