使用CSS根据列表内容动态更改项目符号列表图标的大小

Question

我的HTML页面中有此无序和有序列表。我的是CMS项目，CMS团队对此有特殊要求，他们希望项目符号列表的图标大小根据列表中的文本内容增加或减小。

下面的图片是列表项的默认设计

但是在下图中，即使列表中的文本具有较大的字体大小，项目符号列表图标的大小仍保持不变

我尝试使用以下代码，但它不是固定的

ul {
    li {
        position: relative;
        list-style-type: none;
        padding-left: 9/@rem;
        &::before {
            content: "\2022";
            color: @primary-c1-hex1;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -28/@em;
            padding-right: 11/@em;
            transform: scale(0.8);
        }
        >h6, >strong  h6, > b h6 {
            display: inline-block;
        }
    }
}

如何使用CSS动态调整尺寸？如果不可能仅使用CSS。有没有使用js的解决方法？

Answer 1

通常，这些列表项目符号的大小会自行调整为（父级）字体大小。我认为您的CMS编辑器不会更改li或uls字体大小…而是将容器包装在其内容周围（许多编辑器都这样做）。这样就可以了：

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<ul style="font-size: 2em;">
    <li>One</li>
    <li>Two</li>
</ul>

…，但是您的CMS会这样做：

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<ul>
    <li><span style="font-size: 2em;">One</span></li>
    <li>Two</li>
</ul>

这里有一个fiddle可以看到实际效果。

您可以执行类似that的操作来更好地控制圆圈的位置，颜色等，但是如果您的编辑器像我一样处理文本格式，这也没有帮助，因为它取决于父母大小和颜色就像CSS子弹一样。

我建议您检查一下CMS编辑器生成的语法。