在Web前端开发中，可以通过CSS来实现竖线的绘制。下面是几种常见的方法：

border-left: 1px solid red;
通过修改border的宽度和颜色，可以绘制出不同样式的竖线。
使用伪元素:before或:after：可以通过在HTML元素的样式中添加伪元素:before或:after来绘制竖线。例如，可以在一个div元素中添加如下样式来绘制一个红色竖线：
div:before {
  content: "";
  display: block;
  width: 1px;
  background-color: red;
  height: 100%;
通过修改伪元素的宽度和颜色，可以自定义竖线的样式。
使用Flexbox布局：可以使用Flexbox布局来绘制竖线。首先需要创建一个包含需要绘制竖线的元素的容器，并给容器设置display: flex属性。然后，在容器中创建两个子元素，第一个子元素为需要绘制竖线的元素，第二个子元素为占位元素。添加如下样式：
.container {
  display: flex;
.line {
  flex: 1 0 0;
  border-left: 1px solid red;
通过修改竖线元素的宽度和颜色，可以实现不同样式的竖线。
使用SVG：可以使用SVG（Scalable Vector Graphics）来绘制竖线。首先可以在HTML中创建一个SVG元素，并设置宽度和高度。然后，在SVG元素中使用线段（）元素来绘制竖线，通过指定线段的x1、y1、x2和y2属性来确定线段的起始和结束坐标。例如，以下代码可以绘制一个红色竖线：
<svg width="100px" height="100px">
  <line x1="50" y1="0" x2="50" y2="100" style="stroke:red;stroke-width:1" />
通过修改线段的坐标和样式，可以绘制不同样式的竖线。
使用canvas：可以使用HTML5中的canvas元素来绘制竖线。首先在HTML中创建一个canvas元素，并设置宽度和高度。然后，使用JavaScript来获取canvas元素的上下文（context），并使用context的方法来绘制竖线。例如，以下代码可以绘制一个红色竖线：
<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(50,0);
  ctx.lineTo(50,100);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 1;
  ctx.stroke();
</script>
通过修改线段的坐标和样式，可以绘制不同样式的竖线。
以上是几种常见的方法来在Web前端开发中绘制竖线。根据具体的需求和场景，选择合适的方法来实现竖线的绘制。
这段CSS样式将给类名为.border-line的元素的左侧添加一个1像素宽的黑色实线作为竖线。
使用伪元素before或after：可以使用伪元素before或after来创建一个空的元素，然后通过设置其宽度、背景颜色等样式来实现竖线的效果。例如：
.line {
  position: relative;
.line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: black;
  transform: translateX(-50%);
这段CSS样式将给类名为.line的元素的中间位置添加一个1像素宽的黑色实线作为竖线。
二、使用HTML标签画竖线：
使用hr标签：可以直接使用HTML的hr标签来画横线，如果设置其高度为100%，并给其设置样式border-left可以实现竖线效果。例如：
<hr style="height: 100%; border-left: 1px solid black;">
这段HTML代码将创建一个高度为100%、宽度为1像素的黑色实线作为竖线。
使用div标签：可以使用HTML的div标签，设置其宽度为1像素，背景颜色为黑色来实现竖线效果。例如：
<div style="width: 1px; background-color: black;"></div>
这段HTML代码将创建一个宽度为1像素的黑色实线作为竖线。
三、使用JavaScript脚本画竖线：
可以使用JavaScript脚本来动态创建一个元素，然后设置其样式来实现竖线效果。例如：
var line = document.createElement("div");
line.style.width = "1px";
line.style.height = "100%";
line.style.backgroundColor = "black";
document.body.appendChild(line);
这段JavaScript脚本将在body元素中动态创建一个宽度为1像素、高度为100%、背景颜色为黑色的div元素作为竖线。
综上所述，Web前端开发中可以通过CSS样式、HTML标签和JavaScript脚本等多种方式来画竖线。根据实际需求和场景选择合适的方式即可。