Strikethrough Animation

In this tutorial, you will learn how to create a Strikethrough Animation with CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1>Winterwind Inc.</h1>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  position: relative;
  color: white;
  font-size: 5em;
}

h1:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 10px;
  background: #0380a7;
  animation: strike 1s linear forwards;
}

@keyframes  strike {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}