能否在父元素::after伪元素中获取子元素的data-lang属性？

哎，遗憾的是纯CSS没办法直接实现这个需求。

原因很简单：CSS里的伪元素（比如::after）是依附于它的宿主元素（也就是.parent）存在的，content属性只能读取宿主元素自身的属性值，没办法跨元素去获取子元素.foo的data-lang属性——CSS本身没有提供这种“跨元素引用其他元素属性”的机制。

不过别担心，我们可以借助CSS变量+JavaScript来实现这个效果，步骤如下：

1. 用JS获取.foo的data-lang值，把它赋值给.parent的一个CSS变量（比如--lang）

// 找到目标元素
const parentEl = document.querySelector('.parent');
const fooEl = parentEl.querySelector('.foo');

// 给.parent设置CSS变量
if (fooEl) {
  parentEl.style.setProperty('--lang', fooEl.dataset.lang);
}

2. 在CSS里让.parent::after的content引用这个变量

.parent::after {
  content: var(--lang);
  /* 可以再加一些样式，比如位置、颜色等 */
  margin-left: 8px;
  color: #666;
}

这样就能达到你想要的效果：.parent::after的内容会同步.foo的data-lang属性值。

如果你的内容是静态的（不需要动态更新），也可以直接在HTML里给.parent手动添加CSS变量，比如：

<div class="parent" style="--lang: bar">
  <pre>
    <code class="foo" data-lang="bar"> .... </code>
  </pre>
</div>

然后同样用CSS的var(--lang)来引用就行，这种方式不需要JS，但灵活性差一些，适合固定内容的场景。

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