在CSS中，我們可以使用列表樣式來實現豎線加圓點的效果，具體步驟如下：

1、我們需要創(chuàng)建一個HTML列表，例如一個無序列表（<ul>）或有序列表（<ol>）。

2、我們可以使用CSS的list-style屬性來定義列表的樣式，我們可以設置list-style-type為circle來實現圓點的效果，同時設置list-style-position為inside來讓圓點出現在列表項的內部。

3、我們可以使用list-style-image屬性來定義列表項之間的分隔符，我們可以設置一個豎線的圖像作為分隔符。

4、我們可以調整其他樣式屬性，如字體大小、顏色等，以滿足我們的需求。

以下是一個示例代碼：

HTML代碼：

<ul class="my-list">
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
</ul>

CSS代碼：

.my-list {
  list-style-type: circle;
  list-style-position: inside;
  list-style-image: url('vertical-line.png'); /* 替換為豎線圖像的URL */
  font-size: 16px;
  color: #333;
}

在這個示例中，我們創(chuàng)建了一個無序列表并應用了相應的CSS樣式，列表項之間的分隔符是一個豎線圖像，而圓點則出現在列表項的內部，我們還設置了字體大小和顏色等樣式屬性。

上述代碼中的vertical-line.png是一個示例圖像URL，你需要將其替換為實際的豎線圖像URL，你也可以根據自己的需求調整其他樣式屬性。