CSS伪元素:before/:after能否继承父元素其他属性值？

好问题！我刚好碰到过类似的场景，给你梳理清楚核心逻辑和可行方案：

核心结论 #

:before/:after这类伪元素不能直接跨属性继承父元素的其他属性值（比如让伪元素的border-color继承父元素的background-color）。原因是：

• 伪元素默认只会继承父元素的可继承属性（比如文字颜色color、字体font-family等）；
• inherit关键字只能让伪元素继承父元素的同属性值，无法直接实现“用父元素的背景色当伪元素边框色”这种跨属性的继承需求。

不过针对你遇到的「第三方组件运行时动态设置背景色，要同步给伪元素当边框色」的场景，有两种靠谱的解决办法：

方案1：纯CSS中转（适用于能控制父元素基础样式的情况） #

我们可以借助CSS自定义属性（变量）来实现跨属性的“继承”——自定义属性默认会被伪元素继承，所以只需要把父元素的背景色赋值给变量，再让伪元素用这个变量当边框色：

/* 给第三方组件的元素添加基础样式 */
.third-party-element {
  /* 定义自定义属性，值为当前元素的背景色，同时设置 fallback 值防止异常 */
  --parent-bg: var(--component-bg, #eee);
}

/* 伪元素的样式 */
.third-party-element::after {
  content: "";
  /* 直接使用自定义属性作为边框色 */
  border-color: var(--parent-bg);
  /* 补充其他必要样式 */
  border-width: 2px;
  border-style: solid;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

如果第三方组件本身就是用CSS变量（比如--component-bg）来动态设置背景色的，那直接在伪元素里用这个变量就行，连上面的父元素样式都省了～

方案2：JavaScript辅助（处理动态行内样式） #

如果第三方组件是通过JS给元素设置行内style="background-color: #xxx"（纯CSS无法直接读取这种动态行内属性值赋值给变量），那我们可以用JS监听元素的样式变化，把背景色同步到自定义属性中：

// 选中第三方组件的目标元素
const targetEl = document.querySelector('.third-party-element');

// 创建样式变化监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只监听style属性的变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 获取元素当前的计算后背景色
      const bgColor = getComputedStyle(targetEl).backgroundColor;
      // 把背景色赋值给自定义属性
      targetEl.style.setProperty('--parent-bg', bgColor);
    }
  });
});

// 启动监听
observer.observe(targetEl, { attributes: true });

然后CSS部分和方案1完全一样，伪元素通过var(--parent-bg)获取边框色即可。

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