如何在我的垂直超链接下方画一条垂直线？ html css

Question

我试图将我的垂直对齐的超链接放在垂直线的顶部。 为了证明它以正确的方式工作，让我们使用字母“i”。 点代表我的超链接，而下面的笔划代表我要编码的垂直线。

经过研究，编码了这个样式：

 .vl { border-left: 4px solid #25374C; height: 300px; }

 <div class="v1"> </div>

好吧，这些在我的网页上没有显示任何内容。 我试过使用

标记，也不起作用。

Answer 1

只需创建一个column flex-box并将项目对齐到center 。

 .line { height: 20px; width: 4px; background: red; }.flex-wrapper { display: flex; flex-direction: column; align-items: center; width: max-content; }

 <div class="flex-wrapper"> <a href="">hyperlink</a> <div class="line" /> </div>

Answer 2

使用以下 css：

.v1 {
  border-left: 4px solid #25374C;
  height: 300px;
}

Answer 3

该线程中已经发布了一些答案和评论，它们将帮助您使用<div>创建一条垂直线。 但与往常一样，您还有更多选择。

如果您觉得该行与链接密不可分，例如示例中的行来自i ，那么您可能会将其视为内容而不是样式。 然后像这样的简单解决方案也是可能的：

 p{ writing-mode: vertical-lr; }/* or use vertical-rl */ a{ text-decoration: none; }

 <p><a href="#">link</a> ————</p>