巧妙运用css自定义属性动态修改label:after伪类内容

直接通过JavaScript或修改元素类名/ID来动态更新CSS label:after伪类内容并非最佳方案。 本文提供一种更简洁有效的替代方法：利用CSS自定义属性。

我们为<label></label>元素添加一个自定义属性data-after-content，用于存储label:after伪类内容的动态值。

修改后的HTML代码示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="field">
    <label data-after-content=":">用户名</label>
</div>

接下来，使用CSS attr()函数读取自定义属性值，并将其应用于label:after伪类：

立即学习“前端免费学习笔记（深入）”；

.field label:after {
    content: attr(data-after-content);
}

通过修改data-after-content属性值，即可轻松实现label:after伪类内容的动态更新，避免了繁琐的JavaScript操作或类名/ID修改。 这种方法更简洁、高效，且易于维护。