CSS, vertical delimeter between inline-block buttons(links) - html

Question

I have few button and want to add vertical delimeter(separator) between 'Button 1' and 'Button 2'. I understand that can wrap my link in div with border:
<div id="delimeterDiv" style="border-right: 1px solid #C0C0C0;">
</div>
but I want my links in one line. If I add another div it starts from another line..
Here is jsfiddle:
https://jsfiddle.net/Rockietm/dtnwmdho/
Here is what I want to get:
and here is code:
<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

You can add :after to the button and style it to look like a border
#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

Similar base for answer (pseudo + absolute) with a différent approach to complete #Chiller answer's.
#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

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