如何在不使用<hr>标签的情况下形成一条水平线？

Question

如何在不使用<hr>标记的情况下绘制一条细水平线？

我试过这个：

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

虽然它有效，但我希望这条线更薄。我试着把1便士减到0.5便士，但没有用。

Answer 1

你可以使用它，但没有太大的区别。

.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 2

根据这 css-技巧讨论，您可以这样做：

​

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

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

​

Answer 3

有很多种方法可以做到这一点。在CSS中，我们不能使边框的大小小于1 1px，所以我已经尝试了这种方法。请随意改变不透明度。

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

}