仅用CSS能否显示元素属性值？含前置元素添加需求

1. 实现“Hi Bob o Boring Text”的显示效果 #

完全可以通过CSS实现，利用伪元素和attr()函数就能搞定。给带attr属性的<li>添加:before伪元素，通过content属性读取属性值并拼接分隔符即可：

li[attr]:before {
  content: attr(attr) "  o  ";
}

这段代码会在<li>的原有内容前插入属性值和指定分隔符，最终呈现出你要的效果。

2. 在元素前添加类似独立元素的属性值 #

CSS没办法创建真正的独立DOM元素（比如在当前<li>前面新增一个<li>节点），但可以用伪元素模拟出视觉上的独立元素效果。比如通过定位、块级显示等样式，让伪元素看起来和原元素完全分开：

li[attr] {
  position: relative;
  margin-top: 2em; /* 为伪元素预留空间 */
}

li[attr]:before {
  content: attr(attr);
  position: absolute;
  top: -1.5em;
  left: 0;
  display: block;
  padding: 0.3em 0.5em;
  background-color: #f0f0f0;
  border-radius: 3px;
  /* 可根据需求添加更多样式，比如边框、字体样式等 */
}

如果必须生成真正的独立DOM元素，那只能借助JavaScript来修改DOM结构，CSS做不到这一点——它只能样式化已存在的DOM节点，无法新增或删除节点。

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