如何恢复::after伪元素样式，实现时间戳可读与完整复制兼容

需求说明 #

要实现两个核心效果：

• 页面视觉上显示友好的可读时间（如「1分钟前」）
• 用户选中复制时，得到的是完整的原始时间戳（如「2024-10-23 10:22」）
• 全程无需JavaScript，仅用CSS实现

原方案思路与问题 #

原方案通过以下方式尝试实现：

1. 用data-relative-timestamp属性存储可读时间文本
2. 将原始时间戳的font-size设为极小值、color设为近乎透明，实现视觉隐藏但保留可选中状态
3. 利用::after伪元素读取data属性值，显示可读时间

但原方案存在样式继承问题：

• 伪元素使用font-size: initial和color: initial会重置为浏览器默认样式，无法继承父容器（如不同样式的div）的字体、颜色设置
• 尝试inherit/revert/unset均无效，因为伪元素的直接父元素（.timestamp）本身已被设置了极小字号和透明色

修复后的解决方案 #

通过调整视觉隐藏的方式，让伪元素能够正常继承父容器的样式：

CSS代码

div { font-size: 10px; color: purple; }
div.alt { color: navy; }

.timestamp[data-relative-timestamp] {
  position: relative;
  visibility: hidden;
  /* 保留原始文本的可选中状态，仅隐藏视觉显示 */
}
.timestamp[data-relative-timestamp]::after {
  content: attr(data-relative-timestamp);
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible;
  /* 直接继承父容器的样式 */
  color: inherit;
  font-size: inherit;
}

HTML代码

<div>
  带可读格式的时间戳：
  <span class="timestamp" data-relative-timestamp="1分钟前">2024-10-23 10:22</span>
</div>
<div class="alt">
  不同样式容器下的可读时间戳：
  <span class="timestamp" data-relative-timestamp="1分钟前">2024-10-23 10:22</span>
</div>
<div>
  无可读格式的时间戳：
  <span class="timestamp">2024-10-23 10:36</span>
</div>

<div>
  <br/><br/>测试复制粘贴：<br/>
  <textarea rows="10" cols="80"></textarea>
</div>

方案原理 #

1. 视觉隐藏原始文本：使用visibility: hidden隐藏原始时间戳的视觉显示，但元素仍保留在文档流中，可被选中复制
2. 伪元素覆盖显示可读文本：通过position: absolute将伪元素定位到原始文本的位置，用visibility: visible恢复显示
3. 样式继承：伪元素的color和font-size使用inherit，会继承.timestamp的样式——而.timestamp本身未设置独立的字体/颜色，会自动继承其父容器（如不同样式的div）的样式，完美适配不同父容器的样式设置

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