Generating alternate list items

I'm attempting to design a list style that resembles the one depicted in the image linked below: https://i.stack.imgur.com/U7vMw.jpg

My issue is that when I try to add borders, they end up applying to the entire structure.

.styled-list {
  list-style: none;
  max-width: 200px;
  padding: 0;
  margin: 0;
}

.styled-list li {
  position: relative;
  padding-left: 10px;
}
.styled-list li:before {
  border-radius: 100%;
  position: absolute;
  content: '';
  height: 5px;
  width: 5px;
  top: 6px;
  left: 0;
}
.styled-list li:nth-child(even) {
  padding-right: 10px;
  text-align: right;
  padding-left: 0;
}
.styled-list li:nth-child(even):before {
  left: auto;
  right: 0;
}
<ul class="styled-list">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
  <li>List Item 8</li>
</ul>

Is there a way for me to modify my list to look like the image provided?

htmlcsslist

Answer №1

Utilizing the :after pseudo classes, achieving this effect is possible:

Please note that some slight adjustments may be necessary...

* { margin: 0; padding: 0; box-sizing: border-box; }
.styled-list {
  font-size: 1em;
  list-style: none;
  width: 500px;
  border: 1px solid red;
  position: relative;
}

.styled-list li {
  width: 40%;
  min-height: 3em;
  line-height: 1em;
  border: 1px solid grey;
  padding: 1em;
  position: relative;
  margin-bottom: 1em;
}
/* adjust odd items(except the first) to the right */
.styled-list li:nth-child(2n+3) {
  margin-left: 60%;
}
/* center the first item (head) */
.styled-list li:first-child {
  margin-left: 30%;
  margin-right: 30%;
}
/* create lines extending to the middle */
.styled-list li:nth-child(even):after,
.styled-list li:nth-child(2n+3):before {
  content: ' ';
  border-top: 1px solid black;
  position: absolute;
  top: 50%;
}
/* line for left items */
.styled-list li:nth-child(even):after {
  left:100%;
  right: -25%;
  margin-right: -1px; /* compensate for line width */
}
/* line for right items */
.styled-list li:nth-child(2n+3):before {
  left: -25%;
  right: 100%;
  margin-left: -1px; /* compensate for line width */
}
/* horizontal line */
.styled-list:after {
  content: ' ';
  border-left: 1px solid black;
  position: absolute;
  top: 3em;
  bottom: 2.5em;
  left: 50%;
  right: 0;
  margin-bottom: 0; /* compensate for line width */
}
<ul class="styled-list">
  <li>Head</li>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3 with additional text inside, spanning multiple lines</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
  <li>List Item 8</li>
</ul>

Answer №2

Check out this code snippet for a styled list with alternating colors:

.styled-list {
  position:relative;
  list-style: none;
  max-width: 200px;
  padding: 0;
  margin: 0 auto;
}

.styled-list:before {
   position:absolute;
   content:" ";
   background:#000;
   top:-10px;
   bottom:10px;
   right:50%;
   width:2px;
   margin-right:-1px;
}
.head {
position: relative;
  padding: 5px;
  border:1px solid #000;
  margin:0 auto 10px;
  text-align:center;
  max-width:100px;
}
.styled-list li {
  position: relative;
  padding: 5px;
  border:1px solid #000;
  display:inline-block;
}
.styled-list li:nth-child(even) {
  margin-top:20px;
  float:right;
}
.styled-list li:nth-child(even):after {
  content:" ";
  position:absolute;
  width:18px;
  height:2px;
  left:-18px;
  top:50%;
  background:#000;
}
.styled-list li:nth-child(odd) {
  margin-bottom:20px;
}
.styled-list li:nth-child(odd):after {
  content:" ";
  position:absolute;
  width:18px;
  height:2px;
  right:-18px;
  top:50%;
  background:#000;
}
<div class="head">Header</div>
<ul class="styled-list">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
  <li>List Item 8</li>
</ul>

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

I seem to be having some issues with the functionality of .not() and it's

I am working on creating a menu that remains open for a set amount of time and then fades out if neither the parent nor the menu is hovered over. The goal is to have all other menus close when hovering over a new parent in the menu, but the current code k ...

jqueryhtml

What is the best way to attach a CSS class using an onclick function?

I need to dynamically apply a CSS class to a specific div when clicked using JavaScript. Here is the HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&qu ...

javascripthtmlcss

What could be the reason overflow:hidden isn't functioning properly in IE6?

Would you mind checking this out? http://jsfiddle.net/UQNJA/1/ It displays correctly in all updated browsers, including IE7/8 and 9. However, in IE6, the red and pink borders do not contain the floated <li>s. Any suggestions on how to fix this issu ...

htmlcssinternet-explorercross-browser

Ensure that divs can adjust in size while maintaining the same dimensions of their contained

I'm currently facing a slight issue with these two divs. I want them to be scalable, which I know can be achieved by using percentages, but every time I do so, the divs end up out of position. When I try setting widths, they look fine in Google Chrome ...

htmlcss

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

javascriptjqueryhtml

Exploring the height and overflow properties of nested div elements

Imagine a scenario where you have a fixed-size container and need all the elements to fit inside. The issue arises when some elements contain lots of text, causing the overflow to be hidden but still stretching beyond the container's height. How can t ...

htmlcssoverflow

What are effective strategies to stop the generic * { … } style from overriding its parent tag?

How can I prevent my general * { ... } style from overriding the parent tag? In the given scenario, I want the text "sssssssss" to have the style text-huge. .text-huge { font-size: 28px !important; color: green !important; } * { font-size: 12px; ...

htmlcss

Is it possible to create a responsive Material UI tab design?

How can I make the Material UI tab react component responsive? Check out the documentation for MATERIAL UI TAB here If I have multiple tab items with a search bar like shown below, how can I ensure that the input component stretches the whole width of th ...

cssreactjssasstabsmaterial-ui

Ways to adjust the font size of mat-menu-item?

I came across a query regarding this matter on another platform: How can the font size of mat-menu-item be changed to small in Angular? Unfortunately, the solution provided did not work for me. I attempted to implement the suggested code in my Angular a ...

cssangular

Transferring PHP data to JQuery through HTML elements

When adding a new comment to the list using PHP variables containing HTML code, the method of choice is typically through JQuery. The question arises - what is the most effective way to achieve this? Would one generally opt for an ajax call? Here's t ...

javascriptphpjqueryhtmlajax

Creating a website without access to the internet

When I'm working on my laptop in locations without internet access, I need to build a website. How can I assess the progress of my pages without an active browser? ...

htmlbrowser

Utilizing Javascript in Spotfire for enhanced functionality

Currently, I have a dropdown menu with two options ("START" & "END"). Depending on the selected value from this dropdown, I want to display a specific DIV element. I attempted to use the code below, but unfortunately, it is not functioning as expected ...

javascriptjquerypythonhtmlspotfire

How can I change the names of links containing question marks?

In the past, I would rename links by adding a question mark at the end of them, for example: LinkName.mp4? to Anything I want.mp4 This method allowed me to download the file with the desired name "Anything I want" instead of the original "LinkName"... U ...

htmlhyperlinkrename

The if statement encountered a TypeError because it cannot iterate over a built-in function or method

I'm trying to determine if a global variable exists or not. def add_users(): global users users = [] while True: if 'STATUS' not in globals: server.listen() client, client_addr = server.accept() ...

pythonlistif-statement

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

javascripthtmlcss

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

javascriptjqueryhtmlhtml5-canvas

When positioning 2 divs on top of each other, rotating one by 180 degrees causes it to be considered secondary in the visibility hierarchy. What is the reason behind this?

While delving into the realm of HTML, I stumbled upon a concept that has left me perplexed. Upon stacking two divs on top of each other, I observed an interesting phenomenon where rotating the second div by 180deg (i.e transform:rotateY(180deg)), causes t ...

htmlcss

Transferring data between two HTML files through the POST method

Is there a way to pass two values (parameters) from one HTML page to another without displaying them in the URL, similar to using the POST method? How can I retrieve these values on the second HTML page using JavaScript, AJAX, or jQuery? For example: cli ...

javascriptjqueryhtmlajax

JavaScript Radio Buttons

Below are the different radiobuttons: Apple <input type="radio" id="one" name="apple" data-price="10" value="light"/> Light <input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark <input type="text" id="appleqty" name ...

javascripthtmladdition

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing the code provided below, you can calculate a user's grade point average ranging from A+ to E-. Is there a way, within the following fiddle, to not only display the GPA but also convert it into a corresponding letter grade from A+ to E-? Curr ...

javascriptjqueryhtmlcssdynamic