A Pen by Clara Beyer

Thumbnail
This awesome code was written by csb324, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright csb324 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Clara Beyer</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
<span class="change-group"><del>Cum aliquid deleniti </del><ins>Nesciunt laboriosam voluptatibus</ins></span> ut eveniet id possimus sunt, provident rerum distinctio, nostrum labore commodi iste explicabo magni corrupti beatae dicta, architecto laborum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam quis veniam, tenetur laboriosam nesciunt enim dolorem eos cum aliquid deleniti iste excepturi, delectus corporis exercitationem cupiditate hic amet nam saepe.</p>

<p>Quod odio rem amet iure animi neque necessitatibus magni suscipit nobis, reiciendis officiis esse dolore non alias dignissimos quas, quasi commodi praesentium.</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/csb324/a-pen-by-clara-beyer-xjPQPR */
body {
  font-family: sans-serif;
  line-height: 1.4;
}

p {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

ins, del {
  font-style: normal;
  text-decoration: none;
}

del {
  color: #ee4400;
  opacity: 0.3;
}

ins {
  color: green;
}

.change-group {
  display: inline-block;
}
.change-group del {
  opacity: 0;
  position: absolute;
}

Comments