是否可以通过CSS替换div内容？如何使用nth-child方法实现文本替换

代码失效的核心原因 #

1. 选择器匹配逻辑错误
   你写的.member-info .mb-meta span:nth-child(2)是匹配同一个.mb-meta容器内的第二个span元素，但你的HTML结构中每个.mb-meta下面只有1个span，这个选择器根本匹配不到任何元素。你要匹配的是两个不同.mb-meta容器里的span，应该针对.mb-meta本身使用nth-child选择器。
2. 伪元素随原元素一起隐藏
   你给span设置了display: none，而伪元素是宿主元素的子节点，宿主元素隐藏后伪元素也会跟着消失，自然看不到你设置的content内容。

正确实现方案 #

不需要修改HTML结构，调整CSS选择器和隐藏原文本的方式即可：

/* 匹配第一个.mb-meta下的span，注意.member-info下第一个子元素是h3，所以第一个.mb-meta是第2个子节点 */
.member-info .mb-meta:nth-child(2) span {
  font-size: 0; /* 隐藏原文本，不会影响伪元素显示 */
}
.member-info .mb-meta:nth-child(2) span::after {
  content: 'Speciality123';
  font-size: 16px; /* 恢复正常显示字号，可根据实际需求调整 */
}

/* 匹配第二个.mb-meta下的span */
.member-info .mb-meta:nth-child(3) span {
  font-size: 0;
}
.member-info .mb-meta:nth-child(3) span::after {
  content: 'Designation123';
  font-size: 16px;
}

如果你的页面中.member-info下的子元素顺序可能变动，也可以直接给两个.mb-meta分别加自定义类名，再对应写CSS，匹配逻辑会更稳定。

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