Making a vertical line in HTML/CSS under a list

Question

I'm trying to replicate a design I've made in Illustrator (I know, Lol that I've designed something I don't know how to make!)

So I've made a HTML list horizontal with a border at the bottom. I'll try and demo this visually.

Overview Sales Settings

---

Each of the titles are also underlined (overview, sales, settings), what I would love is to get a little connecting vertical line between the underline of each word and the parent div's bottom border.

So far I've got the underline of each title (using border bottom not underline) and also the bottom border of the parent div.

What I just can't work out is how I fit a vertical line under each list item. I tried to use line break but it ends up reshaping the whole list.

Any ideas/designs would be fantastic

Thanks in advance! - Ash

Here's the link to my dropbox for the pic as my rep is too low to add a picture!

https://dl.dropboxusercontent.com/u/58549715/Screen%20Shot%202015-07-21%20at%2012.13.51.png

Code

<div class="top-menu-two">
 <div class="top-menu-two-controls">
    <ul>
    <li>
        <object type="image/svg+xml" data="MainOverviewColor.svg" class="svg" id="yolo"></object> 
        <span class="menuText" id="topMenuTwoOverview">Overview</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainAgentsColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoAgents">Agents</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainSalesColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoSales">Sales</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainNewQuotationsColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoNewQuotations">New Quotations</span>
    </li>
    </ul>
</div>

.top-menu-two{
display: inline-block;
width: 100%;
padding: 1% 0% 0% 1%;
float: right;
border-bottom: solid 1px rgb(224,34,80);
}

.top-menu-two-controls{
float: left;
display: inline-block;
font-family: 'HelveticaNeue-Bold';
position: relative;
top: 32%;
margin-left: 20px;
}  

.top-menu-two-controls ul{
padding-left: 0;
font-family: 'HelveticaNeue';
list-style-type: none;
font-size: 20px;
}
.top-menu-two-controls li{
display: inline;
margin-right: 10px;
} 

#topMenuTwoOverview{
border-bottom: solid 3px rgb(224,34,80);
}

#topMenuTwoAgents{
border-bottom: solid 3px rgb(64,143,221);
}

#topMenuTwoSales{
border-bottom: solid 3px rgb(224,224,36);
}

#topMenuTwoNewQuotations{
border-bottom: solid 3px rgb(34,127,20);
}

.svg{
display: inline;
width: 30px;
height: 30px;
margin-right: 10px;
}

.menuText{
position: relative;
top: -8px;
}

Answer 1

I'm totally guessing at your html structure as you haven't provided it, but if it is something like a list (as it seems to be a nav) then you could use the after element to create the bottom line:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid grey;
}
ul li {
  display: inline-block;
  padding: 5px 5px 10px 5px;
  position: relative;
  font-weight: bold;
}
ul li:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 8px;
  border-left: 1px solid grey;
}

<ul>
  <li>Overview</li>
  <li>Sales</li>
  <li>Settings</li>
</ul>

Update

Given your code I would first change it so the ids are on the lis instead of the span and then you can use the following:

.top-menu-two {
  display: inline-block;
  width: 100%;
  padding: 1% 0% 0% 1%;
  float: right;
  border-bottom: solid 1px rgb(224, 34, 80);
}
.top-menu-two-controls {
  display: inline-block;
  font-family: 'HelveticaNeue-Bold';
  position: relative;
  top: 32%;
  margin-left: 20px;
}
.top-menu-two-controls ul {
  padding: 0;
  margin: 0;
  font-family: 'HelveticaNeue';
  list-style-type: none;
  font-size: 20px;
}
.top-menu-two-controls li {
  display: inline-block;
  margin: 0 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.top-menu-two-controls li .menuText:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -14px;
  left: 50%;
  height: 12px;
  border-left: 1px solid grey;
}
.top-menu-two-controls li.not-active .menuText:after {
    display:none;
}
.top-menu-two-controls .menuText {
  position:relative;
  border-bottom: 3px solid grey;
}
#topMenuTwoOverview .menuText:after,
#topMenuTwoOverview .menuText {
  border-color: rgb(224, 34, 80);
}
#topMenuTwoAgents .menuText:after,
#topMenuTwoAgents .menuText {
  border-color: rgb(64, 143, 221);
}
#topMenuTwoSales .menuText:after,
#topMenuTwoSales .menuText {
  border-color: rgb(224, 224, 36);
}
#topMenuTwoNewQuotations .menuText:after,
#topMenuTwoNewQuotations .menuText {
  border-color: rgb(34, 127, 20);
}
.svg {
  display: inline;
  width: 30px;
  height: 30px;
}
.menuText {
  position: relative;
  padding-bottom: 3px;
  top: -8px;
}

<div class="top-menu-two">
  <div class="top-menu-two-controls">
    <ul>
      <li id="topMenuTwoOverview">
        <object type="image/svg+xml" data="MainOverviewColor.svg" class="svg" id="yolo"></object>
        <span class="menuText">Overview</span>
      </li>
      <li id="topMenuTwoAgents" class="not-active">
        <object type="image/svg+xml" data="MainAgentsColor.svg" class="svg"></object>
        <span class="menuText">Agents</span>
      </li>
      <li id="topMenuTwoSales" class="not-active">
        <object type="image/svg+xml" data="MainSalesColor.svg" class="svg"></object>
        <span class="menuText">Sales</span>
      </li>
      <li id="topMenuTwoNewQuotations" class="not-active">
        <object type="image/svg+xml" data="MainNewQuotationsColor.svg" class="svg"></object>
        <span class="menuText">New Quotations</span>

      </li>
    </ul>
  </div>
</div>

Answer 2

You can make the ul container with a border-bottom property.

Inside each li, you can make a div below the text with margin auto, or :after pseudo on the li, with transparency and a fixed height and 1px width for border-left/border-right and when click on some of those, with javascript/jquery, give the color.