如何用CSS将文本首行移至末尾？CSS/HTML线条位置调整求助

嘿，我帮你搞定这个CSS线条移动的需求啦！看了你的代码，那条目标线条是通过伪元素生成的，下面给你两种可行的修改方案：

方案一：直接调整现有伪元素的定位 #

你当前控制线条的CSS规则是.content_section.with_border:before，找到这段代码：

.content_section.with_border:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 60px;
    width: 100px;
    height: 1px;
    background: #000;
}

只需要修改top和left的数值，就能把线条移到目标位置。比如如果你的第二个标注位置是h1的左下方，可以改成：

.content_section.with_border:before {
    content: "";
    position: absolute;
    top: 85px; /* 这个数值可以根据视觉效果微调 */
    left: 0;
    width: 100px;
    height: 1px;
    background: #000;
}

方案二：把线条和h1绑定（更灵活） #

如果希望线条始终跟着h1的位置变化，建议把伪元素绑定到h1上：

1. 先给h1添加相对定位，让伪元素能以它为基准定位：

#intro .content h1 {
    position: relative;
    /* 保留你原来的字体、间距等其他样式 */
}

2. 新增h1的伪元素样式，设置线条位置：

#intro .content h1:before {
    content: "";
    position: absolute;
    top: calc(100% + 10px); /* 距离h1底部10px，可调整 */
    left: 0;
    width: 100px;
    height: 1px;
    background: #000;
}

3. 最后记得把原来的.content_section.with_border:before样式删掉或注释掉，避免出现两条重复的线条。

你可以根据自己的需求选其中一种，数值都可以根据实际视觉效果再微调哦~

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