CSS，内联块按钮（链接）之间的垂直分隔符

Question

我有几个按钮，并希望在按钮1和＃39;之间添加垂直分隔符（分隔符）。和＆＃39;按钮2＆＃39;。我明白可以用div包裹div中的链接：

<div id="delimeterDiv" style="border-right: 1px solid #C0C0C0;">
</div>

但我希望我的链接在一行。如果我添加另一个div，则从另一行开始..

这是jsfiddle： https://jsfiddle.net/Rockietm/dtnwmdho/

这是我想要的：

这是代码：

<style>
        #buttons {
            margin-bottom: 12px;
            height: 46px;
        }

        #buttons > a {
            color: black;
            padding: 10px;
            margin-right: 15px;
            margin-top: 2px;
            font-size: large;
            text-decoration: none;
            display: inline-block;
        }

        /* button colors */
        #buttonone {
            background-color: #DCDCDC;
        }

        #buttontwo {
            background-color: #C4E2F3;
        }

        #buttonthree {
            background-color: #B2F0C8;
        }
    </style>
    <div id="buttons">
        <a id="buttonone" href="#" >Button 1</a>
        <a id="buttontwo" href="#">Button 2</a>
        <a id="buttonthree" href="#">Button 3</a>
    </div>

Answer 1

您可以将:after添加到按钮，并将其设置为边框

#buttons > a:after {

       content:'';
       position:absolute;
       top: 0;
       right: -10px;
       height:100%;
       width: 1px;
       background: #000;

 }

 #buttons > a:last-child:after{
        width: 0;/*remove border from the last button*/
 }

See jsfiddle

Answer 2

类似的答案基础（伪+绝对），采用不同的方法来完成@Chiller答案。

#buttons>a:first-child~a:before {
  content: '';
  border-left: double gray;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
}


}
#buttons {
  margin-bottom: 12px;
  height: 46px;
}
#buttons>a {
  color: black;
  padding: 10px;
  margin-right: 15px;
  margin-top: 2px;
  font-size: large;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

/* button colors */
#buttonone {
  background-color: #DCDCDC;
}
#buttontwo {
  background-color: #C4E2F3;
}
#buttonthree {
  background-color: #B2F0C8;
}

<div id="buttons">
  <a id="buttonone" href="#">Button 1</a>
  <a id="buttontwo" href="#">Button 2</a>
  <a id="buttonthree" href="#">Button 3</a>
</div>
<!--buttons-->

https://jsfiddle.net/dtnwmdho/3/

Answer 3

应该帮助你：

#buttons> a:first-child:after  {
   border-right: 1px solid black;
   content: " ";
   position: relative;
   right: -20px ;
   padding: 10px 0;        
}