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.
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.
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>
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.