[分享]css做横线怎么做

CSS做横线的方法有多种，以下是其中两种比较常见的方式。第一种方法是使用伪元素before或after在元素中添加一条横线。在CSS样式中设置伪元素的content属性为空字符串，再设置borderb...

CSS做横线的方法有多种，以下是其中两种比较常见的方式。

第一种方法是使用伪元素before或after在元素中添加一条横线。在CSS样式中设置伪元素的content属性为空字符串，再设置border-bottom属性的样式和宽度即可。

代码如下：

<style>
.line:before {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
}
</style>

<div class="line">这是一条横线</div> 

第二种方法是使用CSS的属性border-bottom实现横线效果。在元素的样式中设置border-bottom的样式、宽度、颜色等属性即可。

代码如下：

<style>
.line2 {
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
}
</style>

<div class="line2">这是一条横线</div> 

以上是两种比较常见的做横线的方法，可以根据实际需要选择其中一种方式来实现。