CSS div 内容和字体图标缩放

Question

This question has 2 parts.

Part 1

I have the situation where I want to show an indicator:

HTML

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

hmi-icon-alarm is an icon from a font file.

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%);
}

The above code works fine, but ideally to simplify things I would like to update the HTML to this:

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

and based on the "alert-icon.alarm" class selector I would like to add the child div that sets the font icon. Similar to doing something like this:

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

I know that this is not possible using content, but is there another (browser supported) way of doing this?

Part 2

Given the same html and css I want to be able to control the size of the font icon so that it is proportional to the width defined in the class .alert-icon (width and height will always be the same), so it can be scaled up and down and look the same (albeit a different size)

HTML

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

hmi-icon-alarm is an icon from a font file.

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 */ 
}

NOTE: Maybe it will be not supported in IE.