user2314241 user2314241 - 5 months ago 7
CSS Question

Creating vertical line at the center of li

I have created a html page with

ul
and
li
's to show some links and set up some background color to the
li
's. Now I want to add vertical line on the
li
's.

When I try to set up a image it is coming as shown in figure 1 but I want it to be as shown in figure 2.

figure 1

enter image description here

figure 2

enter image description here

What I have tried so far:



ul#sitemap1 {
list-style: none;
}

ul#sitemap1 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}

#sitemap1 li {
clear: left !important;
margin-top: 0px !important;
padding: 10px !important;
background: url('/Images/ConnectLine.JPG') no-repeat !important;
float: inherit;
}

ul#sitemap1 li a:hover {
background-color: Orange;
}

ul#sitemap2 {
list-style: none;
}

ul#sitemap2 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}

ul#sitemap2 li a:hover {
background-color: Orange;
}

ul#sitemap3 {
list-style: none;
}

ul#sitemap3 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}

ul#sitemap3 li a:hover {
background-color: Orange;
}

<h1>Innovations</h1>

<ul id="sitemap1">
<a href="https://Home.aspx" style="font-weight:bold;text-decoration:none">Home</a>
<li><a href="https://Services.aspx">Services</a></li>
<li><a href="https:///OC.aspx">Organizational Change</a></li>
<li><a href="https://kit.aspx">kit</a></li>
<li><a href="https://Sheets.aspx">Sheets</a></li>
</ul>

<ul id="sitemap2">
<a href="https://Engagement.aspx" style="font-weight:bold; text-decoration:none">Engagement</a>
<li><a href="https://Ideas.aspx">Ideas</a></li>
<li><a href="https://WS.aspx">WorkSmart</a></li>
</ul>

<ul id="sitemap3">
<a href="https://Links.aspx" style=" font-weight:bold; text-decoration:none">Related Links</a>
<li><a href="https://Gotime.aspx">GO-TIME</a></li>
</ul>




Answer

you can use a pseudo element ::after in the a child of li

Note you can only have li as direct childs of ul. otherwise it is invalid HTML

I tweaked your CSS removing duplicated properties.

ul {
  list-style: none;
  margin-top: 30px
}
ul li {
  clear: left;
  margin-top: 0;
}
ul li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
  position: relative
}
ul li a::after {
  position: absolute;
  top: 100%;
  left: 50%;
  background: black;
  width: 5px;
  height: 100%;
  content: ""
}
ul li:last-of-type a::after {
  background: transparent;
  height: 0
}
ul li a:hover {
  background-color: Orange;
}
<div>
  <h1>Innovations</h1>

  <ul id="sitemap1">
    <li><a href="https://Home.aspx">Home</a>
    </li>
    <li><a href="https://Services.aspx">Services</a>
    </li>
    <li><a href="https:///OC.aspx">Organizational Change</a>
    </li>
    <li><a href="https://kit.aspx">kit</a>
    </li>
    <li><a href="https://Sheets.aspx">Sheets</a>
    </li>

  </ul>
  <ul id="sitemap2">
    <li><a href="https://Engagement.aspx">Engagement</a>
    </li>
    <li><a href="https://Ideas.aspx">Ideas</a>
    </li>
    <li><a href="https://WS.aspx">WorkSmart</a>
    </li>
  </ul>
  <ul id="sitemap3">
    <li><a href="https://Links.aspx">Related Links</a>
    </li>
    <li><a href="https://Gotime.aspx">GO-TIME</a>
    </li>
  </ul>

Comments