Html 如何扩展div，使其覆盖从上到下

所以我试着做一些条形符号来表示不同的成分。我想让横条覆盖文本的整个高度，不管有多少行。我如何使条从div的顶部延伸到底部

具有设定高度的分隔器：

.divider{
显示：内联块；
高度：20px；
宽度：3倍；
位置：相对位置；
边界半径：30px；
背景#0099ff；
左边距：35px；
}
p{
左边距：5px；
字体大小：20px；
颜色：var（--字体颜色）；
}

信息

消息
测试

为什么不在
p
本身上使用
左边框

p {
  border-left:6px solid #0099ff;
  padding-left: 15px;
  margin-left: 5px;
  font-size: 20px;
  color: var(--font-color);
}


p{
左边框：6px实心#0099ff；
左侧填充：15px；
左边距：5px；
字体大小：20px；
颜色：var（--字体颜色）；
}

信息

消息
Testd
自闭症
as
dsadasdas
as
dsadasdas
as
dsadasdas
as
dsadasdas

为什么不在
p
本身上使用
左边框

p {
  border-left:6px solid #0099ff;
  padding-left: 15px;
  margin-left: 5px;
  font-size: 20px;
  color: var(--font-color);
}


p{
左边框：6px实心#0099ff；
左侧填充：15px；
左边距：5px；
字体大小：20px；
颜色：var（--字体颜色）；
}

信息

消息
Testd
自闭症
as
dsadasdas
as
dsadasdas
as
dsadasdas
as
dsadasdas

使用最小高度：100%而不是高度：100%英寸。分隔器
使用最小高度：100%而不是高度：100%英寸。分隔器
您应该将“分隔器”设置为标签，并将其类设置为高度“100%”

<p class="divider2">Messages <br> Test</p>

      .divider2 {
    height:100%;
    width: 3px;
    position: relative;
    border-radius: 30px;
    background: #0099ff;
    margin-left: 35px;
  }

消息
测试
.分割器2{
身高：100%；
宽度：3倍；
位置：相对位置；
边界半径：30px；
背景#0099ff；
左边距：35px；
}


谢谢。
您应该将“分隔符”设置为标签，并将其类别设置为高度“100%”

<p class="divider2">Messages <br> Test</p>

      .divider2 {
    height:100%;
    width: 3px;
    position: relative;
    border-radius: 30px;
    background: #0099ff;
    margin-left: 35px;
  }

消息
测试
.分割器2{
身高：100%；
宽度：3倍；
位置：相对位置；
边界半径：30px；
背景#0099ff；
左边距：35px；
}


谢谢。
嗯，我不知道这是否符合您的要求，但如果您在p标签上使用
左边框
，左边的一行将一直延伸到您段落的整个高度。嗯，我不知道这是否符合您的要求，但是如果在p标记本身上应用
左边框
，左边的行将一直延伸到段落的整个高度。如何使左边框具有半径？可以使用SVG实现这一点，但我认为不能使用干净的CSS环绕此边框。可能会有一些黑客。。哪些是不干净的。如何使左边的边框有一个半径？可以使用SVG实现这一点，但我不认为可以使用干净的CSS使这个边框变圆。可能会有一些黑客。。不干净的。