css在图片上方添加一条直线

CSS是一种用于美化网页的语言，可以让网页更加美观和易读。在实现一些特效时，比如在图片上方添加一条直线，CSS也可以轻松实现。

.img-container {
    position: relative;
}
.img-container::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: translateY(-50%);
}
    

上面的代码中，我们首先为包含图片的容器设置了相对定位。接着，在该容器的伪元素::before中添加了一条用于实现直线的空内容，并绝对定位在容器的中心上方。我们通过设置top为50%和使用CSS3的transform属性实现了垂直居中。

在设计网页时，使用CSS来实现各种效果是非常有用的。掌握基础的CSS知识，可以让你更加轻松地实现出一个美观的网站。

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