如何仅修改标题下方分隔线左端的颜色？CSS样式实现求助

开发者阿泽

2026-7-8

实现标题下方左端异色分隔线的解决方案

你可以通过两个伪元素配合实现示例中的效果，一个负责左端的彩色短线，另一个负责右侧的灰色长线，具体修改后的代码如下：

修改后的CSS代码

.content h4 span {
    text-transform: capitalize;
    font-weight: 900;
    margin-bottom: 20px; /* 增大底部间距，给分隔线留出空间 */
    position: relative;
    display: inline-block; /* 确保伪元素的定位基于当前span元素 */
}

/* 左端的彩色短分隔线 */
.content h4 span::before {
    content: "";
    position: absolute;
    top: calc(100% + 8px); /* 控制分隔线与文字的垂直距离 */
    left: 0;
    width: 60px; /* 彩色部分宽度，可按需调整 */
    height: 2px;
    background-color: #2d3748; /* 替换为你需要的深色 */
}

/* 右侧的灰色长分隔线 */
.content h4 span::after {
    content: "";
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgb(225, 225, 225);
    z-index: -1; /* 让灰色线在彩色线下方，避免被覆盖 */
}

另一种简化思路（无需层级控制）

如果不想用z-index，也可以让灰色线直接从彩色线的末端开始延伸，两个元素互不重叠：

.content h4 span {
    text-transform: capitalize;
    font-weight: 900;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.content h4 span::before {
    content: "";
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #2d3748;
}

.content h4 span::after {
    content: "";
    position: absolute;
    top: calc(100% + 8px);
    left: 60px; /* 与彩色线宽度一致，从末端开始延伸 */
    right: 0;
    height: 2px;
    background-color: rgb(225, 225, 225);
}