Description

Strikethroughs with animated transformations.

Created on 21 July 2026.

Code

<style>
  body {
    font: xx-large Georgia;
  }

  s {
    --transformations: none;
    
    span {
      display: inline-block;
      transition: transform;
      transition-duration: inherit;
      text-decoration: line-through;
    }
    
    &:hover span {
      transform: var(--transformations);
    }
  }

  label {
    display: block;
  }

  input {
    font: inherit;
  }
</style>

<label><input type='checkbox' id='rotate'> rotate</label>
<label><input type='checkbox' id='scaleX'> flip horizontal</label>
<label><input type='checkbox' id='scaleY'> flip vertical</label>
<label><input type='checkbox' id='tip'> tip</label>
<label><input type='checkbox' id='squish'> squish</label>

<hr />

<label>duration (milliseconds): <input type='number' value='500' id='dur'></label>

<p>Lorem ipsum dolor <s><span>Australia</span></s> sit amet.</p>

<script>
  const inputs = [ ...document.querySelectorAll('input') ],
    getInput = (inputId) => inputs.find(({ id }) => inputId === id),
    isChecked = (inputId) => getInput(inputId).checked || '',
    updateTransformations = () => {
      const strikethroughs = document.querySelectorAll('s');
      for (const strikethrough of strikethroughs) {
        strikethrough.style.setProperty('--transformations', [
          isChecked('rotate') && 'rotate(180deg)',
          isChecked('scaleX') && 'scaleX(-1)',
          isChecked('scaleY') && 'scaleY(-1)',
          isChecked('tip') && 'scaleY(0)',
          isChecked('squish') && 'scaleX(0)',
        ].join(' '));
        
        strikethrough.style.transitionDuration = getInput('dur').value + 'ms';
      }
    };

  updateTransformations();

  for (const input of inputs) {
    input.addEventListener('input', updateTransformations);
  }
</script>