Question

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

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

我们可以看到从Home到ABOUT以及从ABOUT到Games（当前项目）的线条当我选择程序时我需要这个点转换为线条，当我选择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; 
}

如何在CSS菜单项之间将点转换为线？

1 个答案: