如何复用CSS类并修改content属性以避免代码重复？

当然可以最大化复用现有样式，避免代码重复，以下是几种实用方案：

1. 基础CSS分组选择器（兼容性最好） #

把所有相同的样式抽出来，用逗号分隔多个选择器统一设置，只单独定义每个标签的content内容：

/* 通用容器样式：所有标签容器共享 */
.foo, .bar, .baz {
    position: relative;
    border: 1px solid #ccc;
    padding: 1em 1em 0.5em 1em;
    border-radius: 4px;
}

/* 通用伪元素样式：所有右上角标签共享 */
.foo:after, .bar:after, .baz:after {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #9da0a4;
    border-radius: 0 4px 0 4px;
    border-width: 0 0 1px 1px;
}

/* 单独定义每个标签的文字内容 */
.foo:after { content: "Foo"; }
.bar:after { content: "Bar"; }
.baz:after { content: "Baz"; }

对应的HTML：

<div class="foo">Hello</div>
<p></p>
<div class="bar">Mama!</div>
<p></p>
<div class="baz">World!</div>

2. HTML data属性+CSS attr()（最灵活） #

用HTML的自定义data-*属性存储标签内容，CSS通过attr()直接读取，新增标签时不用修改CSS，只需要在HTML里加属性：

/* 通用容器样式 */
.label-box {
    position: relative;
    border: 1px solid #ccc;
    padding: 1em 1em 0.5em 1em;
    border-radius: 4px;
}

/* 伪元素直接读取data-label属性的值作为内容 */
.label-box:after {
    content: attr(data-label);
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #9da0a4;
    border-radius: 0 4px 0 4px;
    border-width: 0 0 1px 1px;
}

对应的HTML：

<div class="label-box" data-label="Foo">Hello</div>
<p></p>
<div class="label-box" data-label="Bar">Mama!</div>
<p></p>
<div class="label-box" data-label="Baz">World!</div>

3. CSS变量（适合动态场景） #

用CSS自定义属性（变量）存储标签内容，需要新增标签时只需要定义新的变量值，样式部分完全复用：

/* 通用容器样式 */
.label-box {
    position: relative;
    border: 1px solid #ccc;
    padding: 1em 1em 0.5em 1em;
    border-radius: 4px;
}

/* 伪元素使用变量作为内容 */
.label-box:after {
    content: var(--label-content);
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #9da0a4;
    border-radius: 0 4px 0 4px;
    border-width: 0 0 1px 1px;
}

/* 为不同标签定义变量值 */
.foo { --label-content: "Foo"; }
.bar { --label-content: "Bar"; }
.baz { --label-content: "Baz"; }

对应的HTML：

<div class="label-box foo">Hello</div>
<p></p>
<div class="label-box bar">Mama!</div>
<p></p>
<div class="label-box baz">World!</div>

内容的提问来源于stack exchange，提问作者h q