How would I put vertical bullet points between words?

Question

How would I but bullet points between the words vertically? so for example

March

Bullet

1952 Volume

Bullet

and so on...

Thanks for the help!

HTML

<ul>
    <li>March</li>
    <li>1952 Volume</li>
    <li>CI Number Three</li>
</ul>

Answer 1

ul li:not(:first-child):before {
  content: '•';
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<ul>
    <li>March</li>
    <li>1952 Volume</li>
    <li>CI Number Three</li>
</ul>

Is this what you want?

If yes, you just need pseudo element to put bullet points before the element. I put a css condition that this will not apply to the first element.

Answer 2

Solution 1:

JSFiddle

<ul class="vertical-bullets">
    <li><span>March</span></li>
    <li><span>1952 Volume</span></li>
    <li><span>CI Number Three</span></li>
</ul>

ul.vertical-bullets > li:before {
   content: "\A";
   white-space: pre;
}

ul.vertical-bullets > li > span {
  margin-left: -15px;
}

(See: How to insert a line break before an element using CSS)

---

Solution 2:

JSFiddle

<ul class="vertical-bullets">
    <li></li>
    <span>March</span>
    <li></li>
    <span>1952 Volume</span>
    <li></li>
    <span>CI Number Three</span>
</ul>

ul.vertical-bullets > span {
  margin-left: -15px;
}