vertical lines in HTML CSS

Question

So I'm trying to make vertical lines between words, with indents in them... I've found a few things online, but still a bit confused.

What I have so far:

What I have

How I want them to look:

How I want them to look

I know how to create links, and a vertical line, but I'm having trouble finding how to indent between words and put a vertical line between there.

Any help appreciated!

Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what to [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mre] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets) — Raul Sauco, Jul 21 '21 at 06:59
Please provide us some codes relevant to the topic so we can understand better what's going on, the one you posted are result and the expected output in an image format. — Shiz, Jul 21 '21 at 07:03

score 3 · Accepted Answer · answered Jul 21 '21 at 07:02

Use CSS and border.
Remove the right border from the :last-child

.row {
  display: flex;
  justify-content: center;
}

.links a {
  padding: 0 1.2rem;
  border-right: 2px solid #888;
}

.links a:last-child {
  border-right: 0;
}

<div class="row links">
  <a href="#">Some link 1</a>
  <a href="#">Some link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Some link 4</a>
</div>

Charles Lavalard · Answer 2 · 2021-07-21T09:12:22.737

1

You can use border-left property and use it on every prepend child

.row {
  display: flex;
  justify-content: center;
}

a {
  padding: 0 1rem;
}

a + a {
  border-left: 2px solid #888;
}

<div class="row">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

edited Jul 21 '21 at 09:12

answered Jul 21 '21 at 08:09

Charles Lavalard

2,061
6
26

I really like your `a + a` solution. Good job – Roko C. Buljan Jul 21 '21 at 08:16

score -4 · Answer 3 · answered Jul 21 '21 at 06:59

-4

wrap all your elements inside a div with display:flex

<div class="wrapper"> 
   
   **your codes**

</div>

.wrapper{
    display: flex;
}

answered Jul 21 '21 at 06:59

fevid

723
6
18

vertical lines in HTML CSS

3 Answers3