How to strikethrough empty div
<p>I was making a light saber in CSS. The code is </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.handle
{
    height:10px;
    width:100px;
    background-color:black;
    display: inline-block;
    border-radius: 0 4px 4px 0;
    border-spacing: 0;
    border-collapse: collapse;
}
div.sword
{
    height:6px;
    width:400px;
    background-color:white;
    display: inline-block;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1px;
    margin-bottom: 1px;
    text-decoration: line-through;
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class = "handle"&gt;&lt;/div&gt;&lt;div class = "sword red strike"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I want to strikethrough the light saber completely. </p>

<p>The <code>text-decoration: line-through;</code> property holds good only for text inside the div and not for the div only. </p>

<p>I saw <a href="https://stackoverflow.com/questions/4619542/linethrough-strikethrough-a-whole-html-table-row">Linethrough/strikethrough a whole HTML table row</a> And tried it. But it doesn't work properly. So my question is "How do I strikethrough an empty div" using CSS. </p>