Owl Carousel开启dots后.owl-dots下方出现多余横线如何解决？

问题根因 #

你遇到的横线是.owl-dots相关元素默认的下边框、阴影或父级文本装饰继承导致的，你现有CSS只处理了outline和text-decoration，未覆盖边框、阴影类属性。

修复操作 #

1. 在你的CSS代码中新增如下样式：

/* 清除dots容器所有可能生成横线的属性 */
.owl-theme .owl-dots {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* 清除dot按钮及内部圆点的边框、阴影 */
.owl-theme .owl-dots .owl-dot,
.owl-theme .owl-dots .owl-dot span {
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* 防止外层a标签的下划线继承到dots区域 */
.owl-carousel a {
    text-decoration: none !important;
}
/* 如果仍有横线，可添加下面代码清除伪元素生成的线条 */
.owl-theme .owl-dots::after,
.owl-theme .owl-dots::before {
    display: none !important;
}

2. 修正你HTML代码中的笔误：根元素的class属性里text-cente拼写错误，改为text-center，避免类不生效引发的布局异常。

效果验证 #

修改完成后刷新页面，指示点功能正常保留，下方多余横线会消失，不影响原有轮播的其他交互逻辑。

内容的提问来源于stack exchange，提问作者HSan