Alt line-through

In this example below you will see how to do a Alt line-through with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by phildebrandt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright phildebrandt ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Alt line-through</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='container'>
  <div class='entry'>
    <span class='strikethrough'>
      This is crossed out.
    </span>
  </div>
  <div class='entry'>
    <span class='strikethrough'>
      We have a saboteur aboard. The unexpected is our normal routine. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion?
    </span>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/phildebrandt/alt-line-through-oqjNoe */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
}

.container {
  width: 40%;
  max-width: 400px;
}

.entry {
  margin-bottom: 1.5rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
}

.strikethrough {
  font-size: 16px;
  line-height: 24px;
  position: relative;
  text-indent: 20px;
  background: repeating-linear-gradient(transparent 0px, transparent 9px, #AC9886 9px, #AC9886 11px, transparent 11px, transparent 24px);
}

Comments