為了安全，我覺得還是讓 li 之間保持一點社交距離好了，
所以來講一下幾種做 li 分隔線的方法。

這之前你要先知道什麼是跟屁蟲選取器，以下的範例都會使用到。

範例檔

HTML

<ul>
  <li>我是 li</li>
  <li>我是 li</li>
  <li>我是 li</li>
  <li>我是 li</li>
</ul>

CSS(共同的設定)

ul{
  font-size: 0;
  text-align: center;
  background-color: salmon;
  padding: 10px 0;
}

li{
  display: inline-block;
  font-size: 16px;
  padding: 0 10px;
}

1. border

最簡單的一種作法，就是直接用 border 做出這條分隔線

li+li{
  border-left: 1px solid #000;
}

2. content:'|'

使用 ::before 或 ::after 來做。
這個符號可以直接打出來，在 enter鍵 的上方，搭配 shift 就可以按出來惹。

/* 多做設定 */
li{
 position: relative;
}

li+li::before{
  content:'|';
  position: absolute;
  left: 0;
}

3. ::before 設定寬高

簡單來說就是用 pseudo-element 來做出你想要的線條寬高，再搭配背景色，就可以做出分隔線。

/* 多做設定 */
li{
 position: relative;
}

li+li::before{
  content:'';
  position: absolute;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
}

這種作法也可以變化做出前方是三角形的圖示，像這樣

怎麼做就留待大家自己練習了，這邊有三角形的作法

今天就先講到這裡啦～
我們明天見。