html - 更改列线的高度

Question

所以我一直在研究 CSS，并且找到了一种方法让线条出现在我的导航选项卡之间。

所以例如它会是

Home | About etc etc 

我想知道如何更改“|”的大小

我的编码方式是

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

我试过高度等，但它没有改变实际线的大小。它只是保持不变。所以无论如何改变实际高度会很棒

Answer 1

您可以使用伪元素 :before 或 :after 来创建行。

.nav li {
  display: inline-block;
}
.nav li + li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid;
  padding-left: 8px;
  margin-left: 4px;
  height: 8px;
}

<ul class="nav">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>