@keyframes lineThrough {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
  }

  .crossed {
    font-size: 36px; /* Adjust font size as needed */
    position: relative;
    text-decoration: none;
	z-index: -11;
  }
  
    .noncrossed {
    font-size: 36px; /* Adjust font size as needed */
    position: relative;
    text-decoration: none;
		z-index: -11;
  }

  .crossed:after {
    content: "";
    position: absolute;
    bottom: 42%; /* Adjusted to be a bit lower */
    left: 0;
    width: 100%; /* Adjusted to be a bit longer */
    height: 4px; /* Adjusted for a thicker line */
    background-color: red; /* Changed color to red */
    transform-origin: center;
    animation: lineThrough 3s forwards; /* Adjusted animation duration */
  }
  
  
  @import url("https://fonts.googleapis.com/css?family=Poppins:400,400i,700");
*, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body{
  font-family: "Poppins", sans-serif;
}
div.c{
  position: relative;
  margin:2em;
}
input{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  visibility: 0;
}
h1{
  background:black;
  color:white;
  padding:0.5em;
  position: relative;
}
label::before{
  content:"";
  display: inline-block;
  border: 8px solid transparent;
  border-left:10px solid white;
}
label{
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
div.p{
  max-height:0px;
  overflow: hidden;
  transition:max-height 0.5s;
  background-color: white;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
}
div.p p {
  padding:2em;
}
input:checked ~ h1 label::before{
  border-left:15px solid transparent;
  border-top:20px solid white;
  margin-top:12px;
  margin-right:10px;
}
input:checked ~ h1 ~ div.p{
  max-height:200px;
}
a{
  color:dark;
}