html - 如何将 CSS 菜单项之间的点转换为线？

Question

我有 CSS 垂直菜单，我想像这张照片一样在形状之间制作点

http://s15.postimg.org/vz4jok3wr/Untitled_2.jpg

我们可以看到从 Home 到 ABOUT 以及从 ABOUT 到 Games(current item) 的线，当我选择程序时，我需要这个点转换为线，当我选择 Home 或线上方的任何元素时，线转换为点等等...... .,

<style>
body{background-color:#000;}
ul,
ul li,
ul li a { margin-bottom:30px;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  color:#999;
  margin-left:20px;
}
.active { color:#F00;}

*, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.css-shapes-preview{ 
    position: relative; 
    height: 10px; 
    width: 10px; 
    background-color: #428bca; 
    border-radius: 150px; 
}
</style>
   <ul>
      <li class="css-shapes-preview"><a href='#'><span>Home</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>ABOUT</span></a></li>
      <li class="css-shapes-preview"><a href='#' class="active"><span>GAMES</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>SONGS</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>PROGRAMS</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>DESIGNS</span></a></li>
   </ul>

Answer 1

我建议创建一个新元素(在这种情况下您可以使用伪元素来保持您的标记语义)并给它一个虚线边框。在 http://jsfiddle.net/74yav8h9/ 查看示例.相关的 CSS 是:

ul:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 5px;
    margin-left: 24px;
    /* red for visibility, you can obviously make whatever color you want */
    border-left: 2px dotted red; 
}