在其 ::after 伪元素中恢复元素的样式更改

Question

（背景：）在寻找一种以人类可读格式显示时间戳的方法时，但在用户选择和复制时复制完整时间戳，无需复杂的技巧或任何 JavaScript，我发现了这个简单的基于 CSS 的技巧：

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

.timestamp[data-relative-timestamp] {
    font-size: 0.1px;
    color: rgba(0, 0, 0, 0.01);
}
.timestamp[data-relative-timestamp]::after {
    content: attr(data-relative-timestamp);
    font-size: initial;
    color: initial;
}

<div>
  Timestamp with human readable alt:
  <span class="timestamp" data-relative-timestamp="1 minute ago">2024-10-23 10:22</span>
</div>
<div class="alt">
  Timestamp with human readable alt in alternate-style div:
  <span class="timestamp" data-relative-timestamp="1 minute ago">2024-10-23 10:22</span>
</div>
<div>
  Timestamp without human readable alt:
  <span class="timestamp">2024-10-23 10:36</span>
</div>

<div>
  <br/><br/>Test paste here:<br/>
  <textarea rows="10" cols="80"></textarea>
</div>

它操纵元素的

font-size

和

color

以在视觉上隐藏它，但让用户选择并复制它；

但是我找不到恢复

::after

元素的 CSS 样式的方法，因为

initial

会重置任何样式更改，而不仅仅是

.timestamp[data-relative-timestamp]

引入的样式更改；

inherit

revert

和

unset

不起作用（元素保持“不可见”状态）；理想的应该是从父母的父母那里继承，而不是从父母那里继承。

请注意，

.timestamp

元素可以插入到任何父元素中（这里用

div

和

div.alt

父元素进行演示，它们具有不同的样式），因此将CSS样式复制到

.timestamp::after

并不是一个可行的解决方案。

Answer 1

使用相对（百分比）字体大小可以通过简单地反转百分比变化（1% 的倒数为 10000%）来撤消父元素中的更改，并且不用担心颜色：

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

.timestamp[data-relative-timestamp] {
  font-size: 1%;
  /* color: rgba(0, 0, 0, 0.01); */
}
.timestamp[data-relative-timestamp]::after {
  content: attr(data-relative-timestamp);
  font-size: 10000%;
  /* color: revert; */
}

<div>
  Timestamp with human readable alt:
  <span class="timestamp" data-relative-timestamp="1 minute ago">2024-10-23 10:22</span>
</div>
<div class="alt">
  Timestamp with human readable alt in alternate-style div:
  <span class="timestamp" data-relative-timestamp="1 minute ago">2024-10-23 10:22</span>
</div>
<div>
  Timestamp without human readable alt:
  <span class="timestamp">2024-10-23 10:36</span>
</div>

<div>
  <br/><br/>Test paste here:<br/>
  <textarea rows="10" cols="80"></textarea>
</div>