css 分割线上下

CSS分割线是网页中常用的一种装饰性元素，可以用来分割内容、增加页面美感，同时也能提高页面的可读性与可视性。接下来，本文将介绍如何在CSS中制作分割线，以及如何为分割线上下方添加样式。

一、CSS制作分割线

div {
        width: 80%;
        margin: auto;
        border-top: 1px solid #ccc;
}

上述代码将在div元素上方创建一个1像素宽的实线，颜色为灰色。如果想要生成虚线，只需将solid改为dashed。

div {
        width: 80%;
        margin: auto;
        border-top: 1px dashed #ccc;
}

二、增加分割线上下的样式

div {
        margin: 20px auto;
        padding-top: 20px;
        padding-bottom: 20px;
}
div:before,div:after {
        content: "";
        display: block;
        width: 40%;
        height: 1px;
        margin: 0 auto;
        background-color: #ccc;
}
div:before {
        margin-bottom: 20px;
}
div:after {
        margin-top: 20px;
}
    

上述代码将为分割线添加上下间距，并在分割线上下各生成一条横线。通过:before和:after伪元素，为分割线上下方添加样式。

以上就是关于CSS分割线上下的介绍，希望对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！