Generating a vertical line right in the middle of the list item

I have recently designed an HTML page featuring a list of links using ul and li elements, with a customized background color for each li. Now, I am looking to add vertical lines next to the li items.

When attempting to insert an image, my output looks like what is displayed in figure 1, however, I aspire for it to resemble the design shown in figure 2.

figure 1

https://i.sstatic.net/Ys4N6.jpg

figure 2

https://i.sstatic.net/X54VQ.jpg

Up until now, here is what I have attempted: 

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>

htmlcsshtml-lists

Answer №1

  1. It is recommended to remove the IDs from the CSS and instead reference the ul tag to avoid duplicating the same CSS.

  2. You can utilize the :after pseudo-element to create the line effect.

  3. To eliminate the line from the last item, use :last-child.

ul {
  list-style: none;
}
ul li {
  width: 220px;
  position: relative;
  margin-bottom: 20px;
}
ul li:after {
  content: "";
  position: absolute;
  top: 90%;
  left: 50%;
  height: 25px;
  background: black;
  width: 4px;
  border-radius: 5px;
  border: 2px solid white;
  z-index: 100;
}
ul li:last-child:after {
  display: none;
}
ul li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}
ul 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 №2

Using a pseudo element ::after in the a child of li is recommended.

Keep in mind that li should only be direct children of ul to adhere to valid HTML standards.

I made adjustments to your CSS by removing duplicated properties.

ul {
  list-style: none;
  margin-top: 30px
}
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>

Answer №3

Why not give this a shot? You can also test it out on sitemaps 1 and 3.

ul#sitemap2 li::after{
content:'';
border:3px solid #111;
height:50px;
margin-left:110px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for designing table rows with varying column lengths using CSS and JavaScript

I am facing an issue while populating my table with data from a list. Currently, the table cells are being filled from left to right, but I want them to be populated from top to bottom. Unfortunately, I am unsure how to achieve this using a list method. ...

javascriptcssvue.js

Issue with border styling in Material-UI vertical ToggleButtonGroup

In my current front-end project, I have implemented the React Material UI ToggleButtonGroup. For a Multiple Selection example with vertical styling, you can refer to this code snippet: https://codesandbox.io/s/eyk66?file=/demo.js However, I encountered a ...

cssreactjsmaterial-ui

What is the best way to deliver HTML and JavaScript content using Node.js from virtual memory?

Situation I'm currently developing an in-browser HTML/JS editor, utilizing memory-fs (virtual memory) with Webpack and webpack-html-plugin to package the files created by users in the editor. Storing the files in virtual memory helps avoid I/O operat ...

javascripthtmlnode.jsexpress

Is Live SASS Compiler generating unnecessary files?

Currently, I am in the process of learning how to integrate SASS into my web development projects. However, I am facing some challenges when it comes to properly compiling my .scss files into a single .css file. Upon running sass --version in my terminal, ...

cssvisual-studio-codenpmsassvscode-extensions

I'm confused as to why the icon color isn't changing on the Blogger homepage for each individual user

I'm experimenting with changing the eye color based on visitor count. It works perfectly fine on static posts in my Blogger, but it fails to update the eye color properly on my homepage according to the set numeric values. Instead of displaying differ ...

javascriptcssblogger

Bootstrap causing malfunction of JQuery bounce animation

Looking to create a bouncing popup on hover using Bootstrap (v3.0.0) panel, but encountering an issue where the panel changes its width after the bounce effect. For reference: http://fiddle.jshell.net/YxRvp/ If anyone has a solution for this problem, ple ...

jquerycsstwitter-bootstrapbounce

Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...

c++cssgtk

Struggling to properly align the div in the center

I encountered a frustrating issue where I couldn't properly center the divs on my webpage. The specific challenge I faced was trying to center a div within another div. Despite numerous failed attempts and extensive research, I eventually found a solu ...

htmlcss

The alignment of the horizontal menu items is off

Currently, I am working with asp.net and dealing with a horizontal menu issue. The alignment problem arises where the right side of Menu B appears higher than the left one (Menu A). I have included my code below for reference. Any suggestions or assistance ...

htmlcssalignment

5 Distinctive Text Color Selection Classes in Bootstrap

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https: ...

cssbootstrap-5

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Is it possible to change the background color of the active NavItem element to green using inline CSS in React Bootstrap and React Router Dom? I am currently using TypeScript 2.2 and React. If not, should I create a CSS class instead? Here is the code sni ...

csstwitter-bootstrapreactjstypescriptreact-bootstrap

I'm having trouble accessing the Github website. Is there anyone who can lend a hand?

I am facing difficulties accessing the Github webpage through my home Comcast network. It seems that the issue I am experiencing is similar to the one mentioned in this Stack Overflow post about Could Not Resolve Host github.com. However, since the DNS se ...

githubdnshtmlrouter

Show a toast message and reset the form upon submission

Here I have created a contact form using HTML, CSS, and JavaScript. However, I'm facing an issue where the form redirects me to a page displaying the submitted details after clicking the submit button. I want to display a toast message instead and res ...

javascripthtmljquerycssforms

Expanding list selection with jQuery_hover effect

I have devised the following code. HTML <ul class="treatment-menu"> <li>Menu always visible</li> <ul class="nav-child"> <li>Hidden sub menu</li> </ul> </ul> Hover function $(&a ...

javascriptjqueryhtmlcss

Retrieve the previous cost from an Amazon product listing

While working with Python's BeautifulSoup to extract the previous price from an Amazon page, I encountered a problem where my code was displaying the current price instead of the previous one. This is the code snippet I tried: priceold = soup.find(cl ...

pythonhtmlweb-scrapingbeautifulsoup

Importing a 3D Model Using Three.js

I've been trying to import a 3D model by following tutorials. I managed to successfully import using A-Frame Tags, but encountering issues with Three.js. The code snippets are from a tutorial on YouTube that I referred to: https://www.youtube.com/watc ...

javascripthtmlthree.jsaframe

Utilize Bootstrap 4 to extend an element within a container column all the way to the edge of the viewport

Is there a way to make a div inside a column extend to the edge of the viewport without using a fluid container? The "extended block" must remain in the markup due to CMS limitations. Any suggestions? https://i.sstatic.net/vishD.png https://codepen.io/mw ...

cssbootstrap-4

The menu item is having trouble aligning to the right side

Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...

phphtmlcssmenu

How to vertically center a div within a parent div with a fixed position?

I am facing an issue where I have a div positioned on top of another fixed position div, and I am looking for a way to vertically align the first div. Below is the code snippet that I am currently working with: <div class="overlay"> <div id=" ...

htmlcssvertical-alignmentabsolute

Exploring GLTF models with Threejs - just a click away!

I am currently developing a project in three.js where I aim to load a GLTF file consisting of geometric shapes. My goal is to extract information, specifically the name, of the shapes that are clicked within the GLTF file. At this stage, I am using console ...

javascripthtmlthree.js