当每个字符位于一个div中时，如何将样式分别应用于这些字符？

<div class="character">H</div>
<div class="character">e</div>
<div class="character">l</div>
<div class="character">l</div>
<div class="character">o</div>

.character {
    display: inline-block;
    position: relative;
    font-size: 20px;
}

.character::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* 添加伪元素的样式，可以设置字体大小、颜色、背景等 */
    font-size: 20px;
    color: red;
}

.character:nth-child(1)::before {
    /* 第一个字符的样式 */
    content: "1";
}

.character:nth-child(2)::before {
    /* 第二个字符的样式 */
    content: "2";
}

.character:nth-child(3)::before {
    /* 第三个字符的样式 */
    content: "3";
}

.character:nth-child(4)::before {
    /* 第四个字符的样式 */
    content: "4";
}

.character:nth-child(5)::before {
    /* 第五个字符的样式 */
    content: "5";
}