在 CSS 中，我们经常需要用到竖线来进行分隔或者装饰等操作。那么如何用 CSS 代码来画竖线呢？我们可以使用以下几种方法。

/* 方法一：使用 border 属性 */
div{
border-right: 1px solid #000;
}
/* 方法二：使用伪类 */
div::after{
content: "";
display: block;
height: 100%;
width: 1px;
background-color: #000;
position: absolute;
top: 0;
right: 0;
}
/* 方法三：使用 background-image */
div{
background-image: linear-gradient(to bottom, transparent 50%, #000 50%);
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: right 0;
}
/* 方法四：使用 ::before 和 ::after 两个伪类 */
div{
position: relative;
width: 200px;
height: 100px;
background-color: #fff;
}
div::before,
div::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: #000;
}
div::before{
left: 0;
}
div::after{
right: 0;
}

以上四种方法都可以用来画竖线。第一种方法是最简单的，只需要使用 border-right 属性即可。第二种方法则是用伪类来实现。第三种方法则是用 background-image 来实现，通过渐变来实现竖线的效果。而第四种方法则是使用两个伪类共同实现，比前三种方法稍微复杂一些，但能达到更好的效果。

不同的方法适用于不同的场景，我们可以根据实际情况选择使用哪种方法。