Html 让一封信延伸到下一页？

我正在我的网站上制作一个目录，我有一个想法，可以这样做：

我喜欢T向下延伸的方式，他们给章节编号，并在其周围加上标题。我该怎么做呢

我尝试在css中使用

---

标记：

.contentLine{
        border: 1px solid white;
        background: white;
        width: 2px;
        height: 200px
    }

---

这使得一条直线像我想要的那样上下移动，但我不知道如何或者甚至是否可能将其附加到我页面上的单词内容上。我不想用位置：绝对；标记其中一个。我希望我的网站是可伸缩的。

虽然无法扩展字母表的一部分，但可以通过使用：：before和：：after伪元素来实现

.content{
文本转换：大写；
字体大小：55px；
字体系列：verdana；
字号：700；
}
t{
位置：相对位置；
字体大小：35px；/*控制整个T字号*/
}
t:以前{
内容：''；
身高：100%；
宽度：100%；
位置：绝对位置；
左-50%；
前-50%；
背景色：黑色；
变换：旋转（90度）；
}
t：：之后{
内容：''；
身高：1000%；
宽度：100%；
背景色：黑色；
位置：绝对位置；
左-50%；
最高：0%；
}

康顿

这里是我想到的，我没有使用：：before和：：after伪元素，而是创建了一个hr元素，它与t对齐并在页面中运行。这里有一个链接到

html{
字体系列：verdana；
最大宽度：99%；
身高：200%；
显示器：flex；
弯曲方向：行；
}
人力资源{
/*轮换人力资源*/
变换：旋转（90度）；
/*着色*/
边框颜色：黑色；
背景色：黑色；
/*定义位置*/
位置：相对位置；
左：-153.26px；
高度：3.3倍；
顶部：185px；
宽度：459px；
/*定义填充/边距和溢出*/
边缘顶部：10px；
溢出：隐藏；
}
#num{
/*允许您使用数字和描述偏移量*/
边缘顶部：20px；
/*定义左偏移*/
z指数：-10；
左边距：40px；
}
#描述{
/*允许您使用数字和描述偏移量*/
利润上限：-50px；
/*定义左偏移*/
z指数：-10；
左边距：40px；
}
#屋宇署{
显示器：flex；
}
#头衔{
/*定义底部和左侧偏移*/
左边距：20px；
边缘底部：-15px；
}
#标题1{
/*定义底部和左侧偏移*/
左边距：140像素；
垫底：10px；
}
#其他{
填充顶部：40px；
}

内容

1.
2.
3.
4.
5.
6.
7.
8.
第一册：未来
火星人
详细说明1
说明2
详细说明3
说明4
详细说明5
说明6
详细说明7
说明8
其他网页内容