css add a splitline between two div [duplicate] - css

Question

This question already has answers here:
Separators for Navigation
(9 answers)
Closed 5 years ago.
Hi I'm trying to put a splitline between the tab "Home" and "Cart" and the tab "Help" and "Contact".
.tab-separator {display: inline-block;
padding-right: 5px;
border-right-style: solid;
border-right-width: thin;
border-right-color: red;
height: 10px;
}
<div class="tab-separator">
<div class="tab-menu" id="tab" style="display: inline-block;">
Home
</div>
</div>
<div class="tab-menu" id="tab1" style="display: inline-block;">
Cart
</div>
<div class="tab-separator">
<div class="tab-menu" id="tab2" style="display: inline-block;">
<a href="#">
Help
</a>
</div>
</div>
<div class="tab-menu" id="tab3" style="display: inline-block;">
Contact
</div>
I tried to do so by displaying the border right of the div that surrounds the div tab. But I have a problem I don't manage to move the splitline as I wish. I want it to not be so high, but if I set a margin top it doesn't work, it will move every tabs.
So what I want is the splitline to be a little lower, maybe 2 pixels lower.

Answer 1

You can put "|" easily with UL LI
ul li {
display: inline-block;
}
ul li:not(:last-child):after {
content: "|";
}
<ul class="standard-nav visible-lg">
<li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
</li>
<li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
</li>
<li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
</li>
<li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
</li>
<li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
</li>
<li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
</li>
</ul>

Answer 2

this can easily be done using border-right, like this :
.right_separator{
border-right: 1px solid;/*This will add a border for the right of the element*/
padding-right: 3px;
}
<div class="tab-menu right_separator" id="tab" style="display: inline-block;">
<a href="#">
Home
</a>
</div>
<div class="tab-menu right_separator" id="tab1" style="display: inline-block;">
<a href="#">
Cart
</a>
</div>
<div class="tab-menu right_separator" id="tab2" style="display: inline-block;">
<a href="#">
Help
</a>
</div>
<!-- Don't add .right_separator for the last element-->
<div class="tab-menu" id="tab3" style="display: inline-block;">
<a href="#">
Contact
</a>
</div>