如何在纯 CSS 中动态更改 :before 元素的字体大小？答案

【问题标题】：How to dynamically change font-size of :before element in pure CSS?如何在纯 CSS 中动态更改 :before 元素的字体大小？
【发布时间】：2016-03-21 18:56:19
【问题描述】：

我想根据伪元素设置的元素的字体大小动态更改之前伪元素的大小。

我使用 TinyMCE v4。我添加了如下样式格式：

style_formats: [
    {
      title: 'Custom Bullet',
      selector: 'ul', 
      classes: 'custom_bullet'
    },
]

我用这种格式添加了以下样式：

.custom_bullet li:before{
    content: "\e013";
    font-family: 'Glyphicons Halflings';
    float: left;
    color: #F00;
}

我想要得到的是，当我改变 li 的字体大小时，li 自定义标记也应该动态改变。

我可以用 JS 来做，但这就是我想要避免的。我想找到一个基于 CSS 的解决方案。

【问题讨论】：

这应该已经是默认行为了：jsfiddle.net/w7u92dvg 您是否在某处指定 :before 内容的字体大小？
不，字体大小未在其他任何地方指定，但我知道出了什么问题。当 TinyMCE 创建 ul 列表时，他会创建类似这样的 ul > li+span，并且 span 包含已编辑的 tekst。所以在 span 的元素不能继承正确的 font-size 之前。

标签： html css tinymce

【解决方案1】：

我不确定我是否理解正确，但是：

.custom_bullet li, .custom_bullet li:before {
    font-size: 1em;
}

【讨论】：

那不是动态的.. =/

【解决方案2】：

不要在引号中写字体系列

font-family: Glyphicons Halflings;
.custom_bullet li:before{
    content: "\e013";
    font-family: Glyphicons Halflings;
    float: left;
    color: #F00;
}

【讨论】：

说“不要在引号中写字体系列”既错误又与问题无关。