How to strikethrough empty div

Question

I was making a light saber in CSS. The code is

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;
}

<div class = "handle"></div><div class = "sword red strike"></div>

I want to strikethrough the light saber completely.

The text-decoration: line-through; property holds good only for text inside the div and not for the div only.

I saw Linethrough/strikethrough a whole HTML table row And tried it. But it doesn't work properly. So my question is "How do I strikethrough an empty div" using CSS.

@norlesh Nope, I did not try that. But I fear that might have sideeffects. Can you post an answer If you are sure that it will look good? (Also I doubt it'll touch the rounded corners) — Bhargav Rao, Jan 03 '16 at 10:04

score 13 · Accepted Answer · edited May 23 '17 at 12:18

13

You can do something similar using border-bottom property as in the linked question. Like so:

div.strike {
  position: relative;
}
div.strike:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  border-bottom: 1px solid #111;
  width: 100%;
}

You can change the color just by changing the value of the border-bottom color value. Here is the Jsfiddle for it.

edited May 23 '17 at 12:18

Community

1
1

answered Jan 03 '16 at 10:09

Dacaspex

669
7
15

score 5 · Answer 2 · edited Jan 03 '16 at 11:33

I suppose that you want a light saber like in this image here below with CSS only ?

I was thinking to have an approach without using a strike-through. Then i realized that you could use the linear-gradient instead. You can improve the aligning/color of it of course.

I have added the following two lines in the code example here below

/* added these 2 lines */
background: #FF0000;
background: linear-gradient(to bottom,  #ff0000 0%,#ffdddd 50%,#ff0000 99%);

This allows you to have that red → white → red effect without the use of a strike-through. As result of this, you get a nice red saber.

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;

    /* added these 2 lines */
    background: #FF0000;
    background: linear-gradient(to bottom,  #ff0000 0%,#ffdddd 50%,#ff0000 99%);

    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;
}

<div class = "handle"></div><div class = "sword red strike"></div>

Karel, you *slightly* misunderstood the question. Add a strikethrough through the empty div, then you'll get the correct answer. :) — Bhargav Rao, Jan 03 '16 at 10:20
@BhargavRao i have understood your (interesting) question, but i'm just saying that it could be done without the strike-trough thing. It's only 2 lines CSS if you compare this to the other's one :p. However the other answer does the job as you're asking. Also, the linear-gradient allows you to play with gradient from x color to y color. — KarelG, Jan 03 '16 at 10:24
Yep, but I'm afraid if some "stringent" SO user downvotes your otherwise awesome answer. :) (Just add those 2 lines as a safeguard) — Bhargav Rao, Jan 03 '16 at 10:25

score 3 · Answer 3 · answered Jan 03 '16 at 10:58

Add a :after css element to the div.sword, that will be the line you want. text-decoration is only meant to decorate... well... text :-)

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;
    position: relative;
}
div.sword:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 40%;
    background-color: black;
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}

<div class = "handle"></div><div class = "sword red strike"></div>

It may sound sarcastic, but on the serious note, when ever you try to achieve some effect, using weird technique (like striking through a "non-existing" text), it should make you stop and re-think it. Written with love — Ronen Cypis, Jan 03 '16 at 11:03

score 2 · Answer 4 · answered Jan 03 '16 at 13:16

Another posibility is to add a background with a gradient into it

You can also animate it

background: linear-gradient(white 2px, black 2px, black 4px, white 4px);

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;
    display: inline-block;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1px;
    margin-bottom: 1px;
    text-decoration: line-through;
    background: linear-gradient(to right, red 25%, white 50%, grey 75%, black 100%);
    background-size: 400% 2px;
    background-repeat: no-repeat;
    background-position: 0% 2px;
    animation: pulse 300ms infinite;
}

@keyframes pulse {
    from {background-position: 0% 2px;}
    to {background-position: 100% 2px;}
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}

<div class = "handle"></div><div class = "sword red strike"></div>

How to strikethrough empty div

4 Answers4