[SOLVED] How to achieve overstriking text effect with css?

How to achieve overstriking text effect with css?

I made a little landing page and the client wants: "The text, Sourcing & Trading, CCTV security. Want to use overstriking. Then all will be OK." I googled what overstriking is and I have to admit I'm a little hazy on the concept and not sure how to implement it with CSS at.

The code I tried is in the snippet bellow. Thanks in advance.

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height:100px;
  line-height: 10px; /* Vertically center the text there */
  padding-top:10px;
  background-color: #f5f5f5;
  margin-top: 10px;
}
.main-buttons {
  width: 400px;
  height: 50px;
  margin: 0  auto;
  text-decoration: line-through;
}
span{
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.main-container {
  background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  filter: alpha(opacity=90); /* For IE8 and earlier */
}
.middle{
  top: 50%;
}
.btn-lg {
  box-shadow: 3px 3px #888888;
}
h1 {
  text-shadow: 1px 1px #888888;
}
.logo {
  width: 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Welcome</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body class="main-container">
  <div class="container middle">
    <div class="row ">
      <div class="col-md-12 text-center ">
        <div class="intro"> <br> <br>  <br> <br>
          <img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
          <h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
          <p>
            <a href="http://www.wenshin.ltd/index.php">
                <button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button> 
            </a>
            </p>
            <p>
            <a  href="http://www.cctvcamerahd.com/">
                <button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
      <div class="container">
        <span class="text-center"><p><strong>Choose your language:</strong></p></span>
        <span class="text-center"><p><span>English</span>   <span>繁體中文</span>   <span>Español</span>    <span>Português</span>  <span>Deutsch</span>    <span>Français</span>   <span>Italiano</span>   <span>Pусский</span>    <span>한국어</span>    <span>日本語</span>    <span>Nederlands</span> <span>غة العربية 
          </span>   <span>Indonesian</span>
          </p></span>
      </div>
    </footer>
</body>
</html>

I used:

text-decoration: line-through;

And I wondered if that's it or is there something alternative.

Solution

First of all, I would ask my client what he means by that. Most people mean a strikethrough by saying overstrike.

You would just have to add this to your css for these buttons.

text-decoration: line-through;

As for the overstriking, it is an old technique used in the time of typewriters to write letters that where not on the "Keyboard". It doesn't really make sense anymore.

Cheers!