css add a splitline between two div

Question

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;">
  <a href="#">Home </a>
</div>



</div>
<div class="tab-menu" id="tab1" style="display: inline-block;">
    <a href="#">Cart</a>
</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;">
    <a href="#"> Contact</a>
</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.

You’re overthinking this. This can be easily done by utilizing the “|” character on your keyboard. Put this between your texts and style it through a span as you please. Or, you could implement it through a CONTENT tag in CSS. Whatever works best for you — Bellator, Jan 22 '18 at 14:24

score 1 · Answer 1 · answered Jan 22 '18 at 13:37

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>

Thanks for the reply. Unfortunately it's not what I'm expected. I want to customize the height, padding, margin of "|". And I can't with your solution. Or maybe I can ? — LovePoke, Jan 22 '18 at 13:51

score 0 · Answer 2 · answered Jan 22 '18 at 13:39

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>

css add a splitline between two div

2 Answers2