CSS在一个div中生成3行

我有一个由javascript日历模块生成的HTML div

我怎样才能做到这一点？使用CSS可以创建2条水平线和1条垂直线

我不能在下面划线

这是我的密码：

.div:before {
    content: "";
    width: 2px;
    height: 84%;
    display: block;
    left: 50%;
    top: 45px;
    position: absolute;
    background-image: -webkit-linear-gradient(top, #000, #000, #000);
    background-image: -moz-linear-gradient(top, #000, #000, #000);
    background-image: -ms-linear-gradient(top, #000, #000, #000);
    background-image: -o-linear-gradient(top, #000, #000, #000);
    background-image: linear-gradient(top, #000, #000, #000);
}

.div:after {
    content: '';
    width: 38%;
    height: 2px;
    background: black;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 43px;
}

---

边框顶部、边框底部：之前用于垂直线：

。勾选{
宽度：20px；
高度：100px；
边框顶部：2个实心#555；
边框底部：2个实心#555；
}
.剔：以前{
身高：100%；
内容：''；
宽度：2倍；
背景色：#555；
左：9px；
显示：块；
位置：相对位置；
}

.line{
宽度：1px；
背景：红色；
高度：200px；
位置：相对位置；
利润率：0.20px；
}
.台词：之前{
内容：''；
宽度：40px；
边框顶部：1px纯红；
显示：块；
位置：绝对位置；
排名：0；
左：0；
转化：translateX（-50%）；
}
.台词：之后{
内容：''；
宽度：40px；
边框顶部：1px纯红；
显示：块；
位置：绝对位置；
底部：0；
左：0；
转化：translateX（-50%）；
}

---

感谢您的回复，但如果2条垂直线不在顶部和底部，该怎么办？感谢您的回复，如果2条垂直线不在顶部和底部，该怎么办？像这样imgur.com/a/KZLRJ