如何为网站已实现的divider顶部添加指定样式的小盒子？

架构老林

2026-8-9

给竖线Divider顶部添加小盒子的解决方案

方案1：用CSS伪元素（无需修改原有HTML）

通过给.divider添加相对定位，再利用:before伪元素创建顶部小盒子，代码修改如下：

.divider {
    width: 2px;
    background: linear-gradient(90deg, rgba(6,144,45,1) 0%, rgba(6,144,45,0.0032387955182072714) 87%);
    height: auto;
    min-height: 5vh;
    margin-right: 25px;
    position: relative; /* 让伪元素相对容器定位 */
}

.divider:before {
    content: "";
    position: absolute;
    top: -8px; /* 向上偏移到divider顶部外侧 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中对齐竖线 */
    width: 16px; /* 小盒子宽度 */
    height: 16px; /* 小盒子高度 */
    background-color: #06902d; /* 和渐变起始色保持一致 */
    border-radius: 2px; /* 可选：让边角圆润，匹配示例样式 */
}

原有HTML保持不变：

<div class="divider"></div>

方案2：新增HTML元素（更灵活，便于后续扩展）

如果需要给小盒子加交互或额外内容，可直接在divider内新增一个元素：

修改后的HTML：

<div class="divider">
    <div class="divider-top-box"></div>
</div>

补充对应的CSS：

.divider {
    width: 2px;
    background: linear-gradient(90deg, rgba(6,144,45,1) 0%, rgba(6,144,45,0.0032387955182072714) 87%);
    height: auto;
    min-height: 5vh;
    margin-right: 25px;
    position: relative;
    padding-top: 12px; /* 给顶部盒子预留空间 */
}

.divider-top-box {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background-color: #06902d;
    border-radius: 2px;
}