CSS HTML List Item Classes - html

Question

I am trying to create an ordered list of tasks. As each task is completed, the task turns green, and the line becomes solid. I am looking for help on the static example below.
I have seen some examples of doing this, but I am struggling with the lines and colors. If I use ul li.circle:after for the circle, and ul li.circle:before for the line, I can get it to connect, but they all become solid lines, I cant figure out how to interchange with a dotted line. I would like to use list items to define the line, and color of circle.
In the css there is padding: 0 0 20px 50px; which is why the lines do not connect to the dots as desired, but without the padding, there is no spacing between. To change the color, I can change the color of all, using before/after but I cannot add another class as shown below for the color.
The start css class should be a line with a top, like a letter T, and the arrowDown should have a stem to connect to the dotted line.
The CSS File and lay out of the page:
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.start {
/* polygon? T like shape*/
}
ul {
max-width: 400px;
margin: 0 auto;
list-style-type: none;
margin: 0;
font-family: sans-serif;
color: #ffffff;
}
ul li {
padding: 0 0 20px 50px;
position: relative;
margin: 0;
}
/* Circle */
ul li.circle:after {
position: absolute;
color: #ccc;
top: 0;
left: 0;
content: '';
border: 2px solid #fff;
border-radius: 50%;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
background: #000000;
}
/* Circle
ul li.circle:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
*/
/* Line */
ul li.line:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
/* dottedLine */
ul li.dottedLine:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px dotted #ffffff;
}
/* Missing the stem */
ul li.arrowDown:after {
position: absolute;
transform: rotate(45deg);
top: 10px;
left: 4px;
content: '';
display: inline-block;
text-align: center;
line-height: 24px;
border: solid #ffffff;
border-width: 0px 3px 3px 0px;
display: inline-block;
padding: 6px;
}
<li>
<li class="start">Monday</li>
<li class="line"></li>
<li class="circle green">Task 1</li>
<li class="line"></li>
<li class="circle green">Task 2</li>
<li class="dottedLine"></li>
<li class="circle red">Task 3</li>
<li class="dottedLine"></li>
<li class="arrowDown">Tuesday</li>
</ul>
Please see the attached for desired output from above.
enter image description here

Answer 1

Firstly your opening ul is a li
Then to style as you want you would need to add a height to .line and .dottedline classes like so.
ul li.line, ul li.dottedLine {
height: 20px
}
make you padding padding: 0 0 10px 50px; for ul li
For you start class use a before pseudo class
For you circle background colour add the color to the ul li.circle:after and then over ride it for ul li.red:after
Here is the code with adjustments
body {
background: black;
}
.red {
/* Not needed add color to pseudo element
* background: #ff0000;*/
}
.green {
/* Not needed add color to pseudo element
* background: #00ff00;*/
}
.start {
/* See below: ul li.start:before */
}
ul {
max-width: 400px;
margin: 0 auto;
list-style-type: none;
margin: 0;
font-family: sans-serif;
color: #ffffff;
}
ul li {
padding: 0 0 10px 50px;
position: relative;
margin: 0;
}
/* Circle */
ul li.circle:after {
position: absolute;
color: #ccc;
top: 0;
left: 0;
content: '';
border: 2px solid #fff;
border-radius: 50%;
height: 24px;
width: 24px;
text-align: center;
background: #00ff00;
}
ul li.red:after {
background: #ff0000;
}
/* Line */
ul li.line {
list-style-type:none;
}
ul li.line, ul li.dottedLine {
height: 20px;
}
/* make the first line which is 2nd child 0 */
ul li:nth-child(2) {
height: 10px;
}
ul li.line:before {
position: absolute;
left: 13px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
/* dottedLine */
ul li.dottedLine:before {
position: absolute;
left: 13px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px dotted #ffffff;
}
/* Start T top added */
ul li.start:before {
position: absolute;
content: "";
width: 26px;
left: 0;
top: 24%;
border-top: 2px solid #ffffff;
background: white;
}
/* Missing the stem
* stem added with pseudo class
* start:after slightly modified below
*/
ul li.start:after, ul li.arrowDown:before {
position: absolute;
left: 13px;
top: 0px;
content: "";
height: 90%;
width: 0;
border-left: 2px solid #ffffff;
}
ul li.start:after {
top: 24%;
height: 78%;
}
ul li.arrowDown:after {
position: absolute;
transform: rotate(45deg);
top: 10px;
left: 7px;
content: '';
display: inline-block;
text-align: center;
line-height: 24px;
border: solid #ffffff;
border-width: 0px 3px 3px 0px;
display: inline-block;
padding: 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li class="start">Monday</li>
<li class="line"></li>
<li class="circle green">Task 1</li>
<li class="line"></li>
<li class="circle green">Task 2</li>
<li class="dottedLine"></li>
<li class="circle red">Task 3</li>
<li class="dottedLine"></li>
<li class="arrowDown">Tuesday</li>
</ul>
</body>
</html>