html - 让一封信延伸到页面下方？

Question

我正在我的网站上制作目录，我有一个想法做这样的事情:

https://i.pinimg.com/originals/2f/79/65/2f79656f58bb598e873fbf6632991ac9.jpg

我喜欢 T 向下延伸的方式，他们对部分进行编号并在其周围加上标题。我该怎么做呢？

我尝试在这个 css 中使用

---

标签:

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

这就像我想要的那样形成了一条直线，但我不知道如何或什至可以将它附加到我页面上的内容这个词上。我不想使用 position: absolute;标记。我希望我的网站具有可扩展性。

Answer 1

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

.content{
  text-transform:uppercase;
  font-size:55px;
  font-family:verdana;
  font-weight:700;
}
.t{
  position:relative;
  font-size:35px; /*Control the overall T size*/
}
.t::before{
  content:'';
  height:100%;
  width:100%;
  position:absolute;
  left:-50%;
  top:-50%;
  background-color:black;
  transform:rotate(90deg);
}
.t::after{
  content:'';
  height:1000%;
  width:100%;
  background-color:black;
  position:absolute;
  left:-50%;
  top:0%;

}

<div class="content">
  conten&nbsp;<span class="t">&nbsp;</span>
</div>