html - 在 li 的中心创建垂直线

Question

我创建了一个带有 ul 和 li 的 html 页面来显示一些链接并为 li 设置一些背景颜色'秒。现在我想在 li 上添加垂直线。

当我尝试设置图像时，它出现在图 1 中，但我希望它像图 2 中所示。

图1

图2

到目前为止我已经尝试过:

ul#sitemap1 {
  list-style: none;
}

ul#sitemap1 li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}

#sitemap1 li {
  clear: left !important;
  margin-top: 0px !important;
  padding: 10px !important;
  background: url('/Images/ConnectLine.JPG') no-repeat !important;
  float: inherit;
}

ul#sitemap1 li a:hover {
  background-color: Orange;
}

ul#sitemap2 {
  list-style: none;
}

ul#sitemap2 li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}

ul#sitemap2 li a:hover {
  background-color: Orange;
}

ul#sitemap3 {
  list-style: none;
}

ul#sitemap3 li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}

ul#sitemap3 li a:hover {
  background-color: Orange;
}

<h1>Innovations</h1>

<ul id="sitemap1">
  <a href="https://Home.aspx" style="font-weight:bold;text-decoration:none">Home</a>
  <li><a href="https://Services.aspx">Services</a></li>
  <li><a href="https:///OC.aspx">Organizational Change</a></li>
  <li><a href="https://kit.aspx">kit</a></li>
  <li><a href="https://Sheets.aspx">Sheets</a></li>
</ul>

<ul id="sitemap2">
  <a href="https://Engagement.aspx" style="font-weight:bold; text-decoration:none">Engagement</a>
  <li><a href="https://Ideas.aspx">Ideas</a></li>
  <li><a href="https://WS.aspx">WorkSmart</a></li>
</ul>

<ul id="sitemap3">
  <a href="https://Links.aspx" style=" font-weight:bold; text-decoration:none">Related Links</a>
  <li><a href="https://Gotime.aspx">GO-TIME</a></li>
</ul>

Answer 1

1. 我建议从 CSS 中删除 id，无需复制相同的 CSS，只需引用 ul 标签即可。

2. 您可以使用 :after 伪元素来创建行。

3. 使用 :last-child 删除最后一项的行。

ul {
  list-style: none;
}
ul li {
  width: 220px;
  position: relative;
  margin-bottom: 20px;
}
ul li:after {
  content: "";
  position: absolute;
  top: 90%;
  left: 50%;
  height: 25px;
  background: black;
  width: 4px;
  border-radius: 5px;
  border: 2px solid white;
  z-index: 100;
}
ul li:last-child:after {
  display: none;
}
ul li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}
ul li a:hover {
  background-color: Orange;
}

<h1>Innovations</h1>
<ul id="sitemap1"><a href="https://Home.aspx" style="font-weight:bold;text-decoration:none">Home</a>
  <li><a href="https://Services.aspx">Services</a>
  </li>
  <li><a href="https:///OC.aspx">Organizational Change</a>
  </li>
  <li><a href="https://kit.aspx">kit</a>
  </li>
  <li><a href="https://Sheets.aspx">Sheets</a>
  </li>
</ul>
<ul id="sitemap2"><a href="https://Engagement.aspx" style="font-weight:bold; text-decoration:none">Engagement</a>
  <li><a href="https://Ideas.aspx">Ideas</a>
  </li>
  <li><a href="https://WS.aspx">WorkSmart</a>
  </li>
</ul>
<ul id="sitemap3"><a href="https://Links.aspx" style=" font-weight:bold; text-decoration:none">Related Links</a>
  <li><a href="https://Gotime.aspx">GO-TIME</a>
  </li>
</ul>