如何在不使用的情況下制作水平線<hr>標簽？

Question

如何在不使用<hr>標簽的情況下繪制一條細水平線？

我試過這個：

.horizontal-line{
  border-top: 1px solid #9E9E9E;
  border-bottom: 1px solid #9E9E9E;
}

雖然它有效但我希望這條線更細，我試圖將 1px 減少到 0.5px，但沒有奏效。 請幫忙！

Answer 1

根據此css-tricks 討論，您可以試一試：

 .class-name:after { content: " "; display: block; border-bottom: 0.5px solid #9E9E9E; }

 <div class="class-name"></div>

Answer 2

您可以使用它，但沒有太大區別。

 .line { display: inline-block; width: 100%; border-top: 0.2px solid red; } hr { border-top: 0.2px solid red; }

 <div> content </div> <span class='line'></span> <div> content </div> <hr> <div> content </div>

Answer 3

有很多方法可以做到這一點。 我們不能在 CSS 中使邊框的大小小於 1px，所以我嘗試過這種方式。 隨意更改不透明度。

.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;

}