Is it Possible to Animate CSS "line-through" Width?

In CSS, it is not possible to animate text-decoration: line-through width. However, you can use a pseudo-element instead (such as ::before or ::after) to create a strikethrough line that grows in width, for example, from 0 to 100% on hover.

To demonstrate this, let's suppose you have the following markup where you want to apply the effect on an anchor element that has the class "foo":

Hey, check out my <a href="#" class="foo">new website</a>.

You can start by adding position: relative to the element containing the text:

.foo { position: relative; }

This will allow you to position the strikethrough line relative to the text. After that, to create a strikethrough line that's vertically positioned relative to the text, you could do something like the following:

.foo::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;

    background-color: red;

    position: absolute;
    top: 50%;
    left: 0;

    transition: width 300ms ease-in-out;
}

This won't display anything yet though, as the width is set to 0. To create the animated strikethrough effect, you could, for example, increase the width to 100% on hover:

.foo:hover::after { width: 100%; }