Display

StrikeThrough

A hand-drawn strike on removed text, with an optional animated draw that renders fully drawn under reduced motion.

<script>
  import { StrikeThrough, Highlight } from "@codeatlasdev/ui";
</script>

<p>Stop writing <StrikeThrough animated>workarounds</StrikeThrough> <Highlight animated>one-shot components</Highlight>.</p>

StrikeThrough renders a native <del>, so assistive technology announces the text as deleted. The line is a slightly tilted pen stroke; with animated it draws left to right once on mount with --ca-ease-out-quart. Under prefers-reduced-motion: reduce, or --ca-motion-scale: 0, it is drawn complete with no animation. The color is --ca-strike-color (the error color by default). Under forced colors it falls back to the native line-through. Pair it with Highlight for a rewrite effect.

<script lang="ts">
	import { Highlight, StrikeThrough } from "@codeatlasdev/ui";
</script>

<p class="line">
	Stop writing <StrikeThrough animated>workarounds</StrikeThrough> <Highlight animated>one-shot components</Highlight>.
</p>

<style>
	.line {
		margin: 0;
		font-size: var(--ca-font-size-h4);
		line-height: var(--ca-line-height-snug);
	}
</style>