如何刪除空div

Question

我在用CSS制作軍刀。 該代碼是

 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> 

我想徹底刪除輕劍。

text-decoration: line-through; 該屬性僅對div中的文本有效，而對div無效。

我看到在整個HTML表格行中都有Linethrough /刪除線並進行了嘗試。 但是它不能正常工作。 所以我的問題是使用CSS“如何刪除空的div”。

Answer 1

您可以使用border-bottom屬性執行類似的操作，如鏈接的問題所示 。 像這樣：

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

您可以僅通過更改border-bottom顏色值的值來更改顏色。 這是Jsfiddle 。

Answer 2

我想您是否只想像下面這張圖片中的軍刀一樣使用CSS？

我當時在想一種不使用刪除線的方法。 然后我意識到您可以改用linear-gradient 。 您當然可以改善其對齊方式/顏色。

我在下面的代碼示例中添加了以下兩行

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

這使您可以在不使用刪除線的情況下獲得紅色→白色→紅色的效果。 結果，您得到了一個不錯的紅色軍刀。

 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> 

Answer 3

在div.sword添加:after css元素，這將是您想要的行。 text-decoration僅用於裝飾...好吧...文本:-)

 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> 

Answer 4

另一個可能性是在其中添加帶有漸變的背景

您也可以為其設置動畫

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>