</code><h1>Testing out a <code>content-warning</code> attribute</h1>

<p>I thoroughly enjoyed the film, especially
when it was revealed that<br>
<b content-warning="spoiler">Taye Diggs
  had been the bad guy all along</b>.</p>

<article content-warning="child abuse">
  <p>… article contents …</p>
</article>


<figure content-warning="violence gore">
  <img src="https://image.tmdb.org/t/p/original/jJKiJPDe7yWsxLNj9HWFx9UApsc.jpg"  width="400" alt="A screen capture form Army of Darkness">
</figure>  
body {
  padding: 0 1rem;
}

figure {
  display: inline-block;
}

[content-warning] {
  position: relative;
}

[content-warning]::after {
  content: "Content warning: " attr(content-warning) " (click to reveal)";
  background: #ebebeb;
  position: absolute;
  inset: 0;
  font-weight: normal;
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

[content-warning][revealed]::after {
  display: none;
}
View Compiled
const $content_warnings = document.querySelectorAll('[content-warning]');

function cwClick(e) {
  let $el = e.target;
  while ( ! $el.matches('[content-warning]') &&
          ! $el.matches('html') ){
    $el = $el.parentNode;
  }
  $el.setAttribute('revealed','');
  $el.removeAttribute('tabindex');          
}

function checkEnter(e){
  if ( e.keyCode == 13 ){
    cwClick(e);
  }
}

$content_warnings.forEach($cw => {
  $cw.setAttribute('tabindex','0'); 
  $cw.addEventListener('click', cwClick, false);
  $cw.addEventListener('keydown', checkEnter, false);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.