how do i draw a vertical line below my vertical hyperlink? html css-CodePudding

im trying to place my vertically aligned hyperlink on top of a vertical line. to demonstrate this when its working in the right way, let's use the alphabet "i". the dot represents my hyperlink whereas the stroke below represents the vertical line i am trying to code.

after researching, coded this styling:

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

<div >
</div>

well, these did not show anything on my webpage. i have tried using

tag, doesnt work too.

CodePudding user response：

just create a column flex-box and align items to the center.

.line {
  height: 20px;
  width: 4px;
  background: red;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
}

<div >
  <a href="">hyperlink</a>
  <div  />
</div>

CodePudding user response：

Use the following css :

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