HTML5竖线怎么画？CSS边框轻松实现

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内置的

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代码：。

2、若需自适应高度，可省略height属性，改用CSS设置max-height，并将viewBox保持为"0 0 1 100"以便比例缩放。

3、为防止SVG被文本流挤压，建议添加vertical-align: middle;或display: inline-block;。

本篇关于《HTML5竖线怎么画？CSS边框轻松实现》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！