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

Question

I want to change the size of the before pseudo-element dynamically, according to to font-size of the element, that the pseudo-element is set to.

I use TinyMCE v4. I have added a style format as follows:

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

I add following style with this format:

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

What I want to get, is that when I change font-size of li, the li custom marker should also change dynamically.

I could do it with JS, but that's what i want to avoid. I would like to find a solution based on CSS.

Answer 1

I'm not sure if I understand you correctly, but what about:

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

Answer 2

Don't write the font-family in quotes

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