Html 两个div限制高度之间的垂直线

我正在尝试两个

div

s之间的垂直线。但我不希望它的高度与

div

s相同。 我需要从顶部切10%，从底部切10%

.container{
显示：表格；
边框：1px纯蓝色；
}
.线路{
右边填充：20px；
右边框：1px固体#cfc7c0；
}
.首先{
显示：表格单元格；
宽度：30%；
}
.第二{
显示：表格单元格；
宽度：30%；
左侧填充：10px；
}

这是第一个div和一些文本
赖特

以及更多

侧面

您可以尝试在伪元素之后使用

：：

.line{
位置：相对位置；
}
.台词：之后{
内容：''；
位置：绝对位置；
右：0；
右边框：1px固体#cfc7c0；
排名前10%；
底部：10%；
}


.container{
显示：表格；
边框：1px纯蓝色；
}
.线路{
右边填充：21px；/*20+1*/
位置：相对位置；
}
.台词：之后{
内容：''；
位置：绝对位置；
右：0；
右边框：1px固体#cfc7c0；
排名前10%；
底部：10%；
}
.首先{
显示：表格单元格；
宽度：30%；
}
.第二{
显示：表格单元格；
宽度：30%；
左侧填充：10px；
}

这是第一个div和一些文本
赖特

以及更多

侧面
要执行此操作，您需要向容器添加一些填充。容器：

.container{
显示：表格；
边框：1px纯蓝色；
填充：10%0；
}

小提琴

谢谢，这就是我要找的。。。！
.container{
   display : table;
    border : 1px solid blue;
    height:150px;
}

.line:after {
    content:"";
    position: absolute;
    top:20px;
    bottom:0;
    left: 50%;
    height:120px;
    border-right: 2px dotted #ff0000;
}