可用css border-left、伪元素、旋转hr、flex子项或svg五种方法绘制竖线：border-left最常用；伪元素语义纯净；旋转hr保持语义但需处理布局；flex子项适合导航分隔；SVG精度最高且可响应式缩放。
如果您需要在网页中绘制一条竖直的分隔线，html5本身不提供专门的“竖线”标签，但可通过CSS的border属性或语义化标签配合样式实现。以下是几种常用且兼容性良好的绘制方法：
一、使用CSS border-left属性绘制竖线
该方法通过为一个具有固定宽高的块级元素（如div）设置左侧边框，从而形成视觉上的竖直线。其优势在于位置可控、颜色粗细可调，且不依赖额外内容。
1、在HTML中插入一个空的
。
2、在CSS中定义该class：.vertical-line { width: 1px; height: 200px; background-color: transparent; border-left: 1px solid #000; }。
立即学习“前端免费学习笔记（深入）”；
3、若需居中对齐，可添加margin: 0 auto;并确保父容器为相对定位或启用flex布局。
二、使用伪元素::before或::after绘制竖线
该方法无需额外HTML标签，仅通过CSS生成一个垂直线条，适用于装饰性分隔场景，保持结构语义纯净。
1、选择目标容器（如.nav-item），在其CSS规则中添加position: relative;。
2、添加伪元素样式：.nav-item::after { content: “”; position: absolute; top: 50%; left: 100%; width: 1px; height: 40px; background-color: #ccc; transform: translateY(-50%); }。
3、调整left值控制竖线与容器右侧的距离，height和background-color分别控制长度与颜色。
三、使用
标签配合writing-mode旋转实现竖线
利用HTML内置的
标签（默认为水平线），通过CSS将其旋转90度，使其呈现为垂直方向。此法语义上仍表示“主题分隔”，需注意旋转后的布局影响。
1、在HTML中插入
。
2、在CSS中定义.vertical-hr { height: 1px; border: none; background-color: #666; margin: 0; writing-mode: vertical-lr; transform: rotate(180deg); }。
3、为确保正确显示，需设置其父容器display: inline-block或指定明确宽高，并清除默认外边距。
四、使用flex布局中的justify-content与border组合模拟竖线
当竖线用于分隔多个并排元素（如导航项）时，可在相邻元素之间插入一个窄flex子项，仅设左右边框，形成嵌入式分隔效果。
1、将所有项目包裹在display: flex的容器中，例如
。
2、为.divider设置样式：.divider { width: 1px; height: 24px; background-color: rgba(0,0,0,0.2); margin: 0 12px; align-self: center; }。
3、移除span默认的white-space: nowrap干扰，确保高度一致，必要时添加line-height匹配。
五、使用SVG内联绘制精确控制的竖线
SVG方式可实现像素级控制，支持响应式缩放与透明度调节，适合对图形精度要求较高的场景，且无渲染偏差。
1、在HTML中插入内联SVG代码：svg class=”vline” width=”1″ height=”120″ viewBox=”0 0 1 120″>
2、若需自适应高度，可省略height属性，改用CSS设置max-height，并将viewBox保持为”0 0 1 100″以便比例缩放。
3、为防止SVG被文本流挤压，建议添加vertical-align: middle;或display: inline-block;。