CSS div内容和字体图标缩放

Question

此问题分为2部分。

第1部分

我有想要显示指标的情况：

HTML

<div class="alert-icon alarm">
     <div class="hmi-icon-alarm"></div>
</div>

hmi-icon-alarm是来自字体文件的图标。

CSS

.alert-icon.alarm {
    background-color: #c4262e;
    border-style: solid;
    border-color: #ffffff;
}

.alert-icon.alarm .hmi-icon-alarm {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

上面的代码工作正常，但理想情况下是为了简化事情，我想将HTML更新为此：

<div class="alert-icon alarm"></div>

并且基于“ alert-icon.alarm”类选择器，我想添加设置字体图标的子div。类似于执行以下操作：

.alert-icon.alarm::after {
    content: '<div class="hmi-icon-alarm"></div>';
}

我知道使用内容是不可能的，但是有另一种方式（支持浏览器）吗？

第2部分

给出相同的HTML和CSS，我希望能够控制字体图标的大小，以便它与类.alert-icon中定义的宽度成比例（宽度和高度始终相同），因此可以放大和缩小，看起来一样（尽管大小不同）

HTML

<div class="alert-icon alarm">
     <div class="hmi-icon-alarm"></div>
</div>

hmi-icon-alarm是来自字体文件的图标。

CSS

.alert-icon {
    width: 200px;
    height: 200px;
}

.alert-icon.alarm {
    background-color: #c4262e;
    border-style: solid;
    border-color: #ffffff;
}

.alert-icon.alarm .hmi-icon-alarm {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 1

.alert-icon {
    --size: 200; /* Icon width */
    --scale-factor: 0.25 /* Icon size relative to container */;
    width: calc(var(--size) * 1px)
}
.alert-icon.alarm::after {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    font-size: calc(var(--size) / var(--scale-factor) * 1px);
    transform: translate(-50%, -50%);
    /* All other properties belonging to .hmi-icon-alarm */ 
}