好问题！遗憾的是，CSS本身并没有原生语法支持直接继承并拼接content属性值——content默认是非继承属性，而且也没有内置的方式让你直接引用其他选择器下的content值来拼接。不过我们有几种实用的替代方案来实现你想要的效果：

方案1：使用CSS自定义属性（变量） #

这是最灵活且不需要修改HTML的方法。我们可以把基础文本存在一个CSS变量里，然后在需要的伪元素中组合使用：

/* 定义基础文本变量 */
div {
  --base-content: "hello";
}

/* 基础div的伪元素使用变量 */
div::after {
  content: var(--base-content);
}

/* .bear的伪元素拼接变量和额外文本 */
.bear::after {
  content: var(--base-content) " bear";
}

这样，.bear::after的内容就会变成hello bear，完美实现拼接效果。变量会被继承，所以只要.bear是div的后代（或者你直接把变量定义在更上层的元素），都能正常使用。

方案2：结合HTML属性与attr()函数 #

如果你能控制HTML结构，也可以把基础文本存在元素的自定义属性里，再用attr()读取并拼接：

<div class="bear" data-base-text="hello"></div>

div::after {
  content: attr(data-base-text);
}

.bear::after {
  content: attr(data-base-text) " bear";
}

这个方法适合需要动态修改基础文本的场景（比如JS可以直接修改元素的data-base-text属性）。

为什么原生CSS做不到？ #

简单来说：

• content属性在CSS的继承规则里属于非继承属性，所以子元素（包括伪元素）不会自动继承父元素伪元素的content值；
• CSS没有提供类似“引用其他选择器属性值”的语法，无法直接获取div::after的content值来复用。

所以上面的两种方案是目前最常用的替代手段，其中CSS变量的方案更推荐，因为它完全在CSS层面解决问题，不需要改动HTML。

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