Revert element's style change in its ::after pseudo-element

(background:) while looking for a way to display a timestamp in a human readable format, but copy the full timestamp when the user selects and copy, without complex tricks or any JavaScript, I found this simple CSS-based trick:

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>

it manipulates font-size and color of the element to hide it visually, but let the user select and copy it;

however I can’t find a way to restore the CSS style of the ::after element, as initial resets any style change, not only that introduced by .timestamp[data-relative-timestamp]; inherit revert and unset do not work ( element stays "invisible"); ideal should be to inherit from parent’s parent, not from parent.

note that the .timestamp element could be inserted into any parent element (here demonstrated with div and div.alt parents, which have different style), so copying the CSS style into .timestamp::after is not a viable solution.

You need to sign in to view this answers

Related Post