This is a django + html, css and very minimal or no JS question of a Tree display using nested UL/LI
(so far) have found out already the work of displaying tree vertical/horizontal is done,
(current issue) aim is to display a dynamic tree or static tree using nested UL in multiple format or options for the end-users with different options (they may choose for easier visualization) like vertical tree, horizontal tree and goal on the left side or right side.
so far those are achieved
currently the issue in working on the following to display vertically aligned horizontal tree with flex, and unable to succeed with the display as the wrap of the one tree path is making some impact on the next connectors (still trying to figure out which css selector and associated property will help to clear the gap)
Please find the attached screen shot and also the code
enter image description here
Latest Results Screenshot
enter image description here
CSS code:
<style>
body {
padding-top: 10px;
}
.tree {
list-style: none;
}
.tree,
.tree * {
margin: 0;
}
.tree li {
display: flex;
flex-direction: row;
align-items: flex-start;
position: relative;
padding-left: 2vw;
}
.tree li::before {
content: '';
position: absolute;
align-items: center;
left: 0;
top: 10%;
border-top: 4px solid rgb(42, 165, 97);
width: 2vw;
}
/* ========================================================= */
.tree li::after {
content: '';
position: absolute;
align-items: flex-start;
left: 0;
top:10%;
margin-bottom: 2px;
}
.tree li:not(:only-child):after {
content: '';
position: absolute;
left: 0;
bottom: 10%;
margin-top: 0px;
margin-bottom: 2px;
border-left: 3px solid rgb(172, 206, 20);
}
/* ========================================================= */
.tree li:last-of-type::after {
height: 50%;
top: 0;
}
.tree li:first-of-type::after {
height: 50%;
bottom: 0;
}
.tree li:not(:first-of-type):not(:last-of-type)::after {
height: 100%;
}
.tree ul,
.tree ol {
padding-left: 2vw;
position: relative;
}
.tree ul:not(:empty)::before,
.tree ol:not(:empty)::before {
content: '';
position: absolute;
left: 0;
top: 8%;
border-top: 4px solid red;
width: 2vw;
}
.tree span {
border: 1px solid;
text-align: center;
padding: 0.33em 0.66em;
background-color: yellow;
color: blue;
}
.tree>li {
padding-left: 0;
}
.tree>li::before,
.tree>li::after {
display: none;
}
ol,
ul {
counter-reset: section;
}
li span::before {
counter-increment: section;
/* content: counters(section, ".") " "; */
font-family: monospace;
}
body {
/* display: flex; */
justify-content: center;
align-items: center;
height: 100%;
}
finally working to a basic draft version:
enter image description here
still has to test with different dynamic options and also create a smooth alignment between the lines.
Currently this is the working copy,
still some more - pending fixes - please find the code and screenshot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding-top: 10px;
}
.tree {
list-style: none;
}
.tree,
.tree * {
margin: 0;
}
.tree li {
display: flex;
flex-direction: row;
align-items: flex-start;
position: relative;
padding-left: 2vw;
padding-bottom: 2vh;
}
.tree li::after {
content: '';
position: absolute;
left: 0;
top: 5%;
margin-top: 2px;
}
.tree li::before {
content: '';
position: absolute;
align-items: center;
left: 2px;
top: 1%;
margin-left: -2px;
margin-right: -20px;
border-top: 5px solid red;
width: 2vw;
}
.tree li:not(:last-of-type)::before {
content: '';
position: absolute;
align-items: center;
left: -2px;
margin-left: -3px;
top: 2%;
border-top: 2px solid BLUE;
width: 2vw;
}
/* ========================================================= */
.tree li:not(:only-child):not(:last-of-type)::before {
content: '';
position: absolute;
left: 0;
bottom: 0%;
margin-top: 1px;
margin-bottom: -4px;
border-left: 2px solid blue;
}
.tree li:not(:only-child):not(:first-of-type):not(:last-of-type)::before {
content: '';
position: absolute;
left: 0;
bottom: 0%;
margin-top: 1px;
margin-bottom: -4px;
border-left: 2px solid red;
}
.tree li:only-child::before {
content: '';
position: absolute;
left: 0;
bottom: 0%;
margin-top: 1px;
margin-bottom: -6px;
border-left: 0px solid grey;
}
.tree li:only-child::after {
content: '';
position: absolute;
left: 0;
bottom: 2%;
top: 14%;
margin-top: 10px;
margin-bottom: 2px;
border-left: 0px solid grey;
}
.tree li:only-last-child::after {
content: '';
position: absolute;
left: 0;
bottom: -5%;
top: -20%;
margin-top: 10px;
margin-bottom: -24px;
border-left: 10px solid yellow;
}
.tree li:only-last-child::before {
content: '';
position: absolute;
left: 0;
bottom: 0%;
top: 5%;
margin-top: -9px;
margin-bottom: 20px;
border-left: 2px solid white;
}
/* ========================================================= */
.tree li:last-of-type::after {
height: 50%;
top: 0;
}
.tree li:first-of-type::after {
height: 50%;
bottom: 0;
}
.tree li:not(:first-of-type):not(:last-of-type)::after {
height: 100%;
}
.tree ul,
.tree ol {
padding-left: 2vw;
position: relative;
}
.tree ul:not(:empty)::before,
.tree ol:not(:empty)::before {
content: '';
position: absolute;
left: 0;
top: 2%;
margin-bottom: -2px;
border-top: 2px solid blue;
width: 2vw;
}
.tree span {
border: 1px solid;
text-align: center;
padding: 0.33em 0.66em;
background-color: yellow;
color: blue;
}
.tree>li {
padding-left: 0;
}
.tree>li::before,
.tree>li::after {
display: none;
}
ol,
ul {
counter-reset: section;
}
li span::before {
counter-increment: section;
/* content: counters(section, ".") " "; */
font-family: monospace;
}
body {
/* display: flex; */
justify-content: center;
align-items: center;
height: 100%;
}
</style>
</head>
<body>
<ul class="tree">
<li><span>Main</span>
</li>
</ul>
<ul class="tree">
<li>
<span>BACKLOG</span>
<ul>
<li><span>Level1</span>
<ul>
<li><span>Level1.1</span>
<ul>
<li><span>Level1.2.1</span>
<ul>
<li><span>Level1.2.1.1</span></li>
<li><span>Level1.2.1.2</span></li>
</ul>
</li>
<li><span>Level1.2.2</span></li>
</ul>
</li>
<li><span>Level1.2</span>
<ul>
<li><span>Level1.2.1</span>
<ul>
<li><span>Level1.2.1.1</span></li>
<li><span>Level1.2.1.2</span>
<ul>
<li><span>Level1.2.1.2.1</span></li>
<li><span>Level1.2.1.2.2</span></li>
<li><span>Level1.2.1.2.3</span></li>
</ul>
</li>
<li><span>Level1.2.1.3</span></li>
</ul>
</li>
<li><span>Level1.2.2</span>
<ul>
<li><span>Level1.2.2.1</span></li>
<li><span>Level1.2.2.2</span></li>
<li><span>Level1.2.2.3</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Screenshot
Related
I want to make a tab style so the bottom of the tab doesn't have an underline. To do this I thought I could set bottom border color of tab and then make child menu go underneath.
I am not sure if that is possible though.
This excerpt is taken from site, it is done like this as the child menu is usually shown on hover.
body {
background-color: #000;
}
.desktop-menu {
color: #fff;
list-style: none;
}
.desktop-menu a {
color: #fff;
text-decoration: none;
}
.desktop-menu > li {
background-color: blue;
width: 60px;
margin-left: 25px;
border: 1px solid #fff;
border-bottom-color: blue;
padding: 10px;
position: relative;
z-index: 20;
}
.desktop-menu ul {
background-color: blue;
z-index: 10;
width: 200px;
display: flex;
position: absolute;
top: 100%;
left: -1px;
flex-direction: column;
list-style: none;
margin: 0;
padding: 10px 20px;
padding-top: 15px;
border: 1px solid #fff;
background-color: darkblue li;
padding-bottom: 15px;
}
.desktop-menu .has-sub:hover {
border: 1px solid #fff;
}
.desktop-menu .has-sub:hover ul {
display: flex;
}
<ul class="desktop-menu">
<li class="has-sub">Products
<ul>
<li>Product name 1</li>
<li>Prod name 2</li>
</ul>
</li>
</ul>
I am trying to remove this white line:
What is best method to achieve this?
Just a hack but it works.
.desktop-menu > li {
position: relative;
// ...
}
.desktop-menu > li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
width: 100%;
background-color: blue;
}
.desktop-menu ul {
display: none;
transform: translateY(-1px);
// ...
}
.desktop-menu .has-sub:hover ul {
display: flex;
}
See result in codesandbox.
Note: not suitable if you are working with transparent backgrounds.
Edit: updated the sandbox to proof it works with the hover effect.
I've got this timeline code, I am trying to remove the line on top of first child and from last child, how can I get this border, do I need to add another absolute element to cover it up or?
Image what I want removed
Same goes for the line after End button.
body {
margin: 0;
}
.tree {
position: relative;
}
.tree {
position: relative;
list-style: none;
}
li {
border-left: 1px solid #abaaed;
padding-bottom: 50px;
position: relative;
padding-left: 20px;
margin-left: 10px;
height: auto;
display: flex;
align-items: center;
}
li:last-child {
padding-bottom: 0;
}
li::before {
content: '';
width: 15px;
height: 15px;
background: white;
border: 1px solid #4e5ed3;
border-radius: 50%;
position: absolute;
left: -8px;
}
li::after {
content: '';
width: 10px;
height: 2px;
position: absolute;
left: 7px;
top: auto;
background: #4e5ed3;
}
button {
padding: 10px 20px;
}
<div>
<ul class="tree">
<li><Button>Start</Button></li>
<li>
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</li>
<li><Button>
End</Button></li>
</ul>
</div>
You can try using background instead of border.
:root {
--circle-size: 15px;
}
body {
margin: 0;
}
.tree {
position: relative;
}
.tree {
position: relative;
list-style: none;
}
li {
padding-bottom: 50px;
position: relative;
padding-left: 20px;
margin-left: 10px;
height: auto;
display: flex;
align-items: center;
--line-padding: 0px;
--y-position: 0;
background: linear-gradient(#abaaed, #abaaed) 0 var(--y-position) / 1px calc(100% - var(--line-padding)) no-repeat;
}
li:first-child,
li:last-child {
--line-padding: 15px;
}
li:first-child {
--y-position: 100%;
}
li:last-child {
padding-bottom: 0;
}
li::before {
content: '';
width: 15px;
height: 15px;
background: white;
border: 1px solid #4e5ed3;
border-radius: 50%;
position: absolute;
left: -8px;
}
li::after {
content: '';
width: 10px;
height: 2px;
position: absolute;
left: 7px;
top: auto;
background: #4e5ed3;
}
button {
padding: 10px 20px;
}
<div>
<ul class="tree">
<li>
<Button>Start</Button>
</li>
<li>
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</li>
<li>
<Button>
End</Button>
</li>
</ul>
</div>
I have a simple distributed system project which aims to develop airlines booking and purchase system. In this project, the main goal is to achieve proper functionalities, not to achieve best visuality. However, I have really basic problem due to my lack of experience in web design area.
Any kind of interest of you will be appreciated!
In my home page, I tried to draw an airplane layout but the problem is margins. I can not arrange properly the seats in between plane borders.
Demonstration of my ugly home.php:
Architecture of my home.php:
<div class="content">
...
<div class="airplane">
...
<div class="cockpit">...</div>
<ol class="fuselage">
<li class="row row--1">
<ol class="seats">
<li class="seat">...</li>
</ol>
</ol>
</ol>
</div>
</div>
Here is my CSS code:
div.content
{
margin-left: 200px;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 700px)
{
.sidebar
{
width: 100%;
height: auto;
position: relative;
}
.sidebar a
{
float: left;
}
div.content
{
margin-left: 0;
}
}
#media screen and (max-width: 400px)
{
.sidebar a
{
text-align: center;
float: none;
}
}
.airplane
{
margin: 10px auto;
max-width: 500px;
position: relative;
margin-left: 25px;
}
.cockpit
{
margin-left: 25px;
height: 250px;
position: relative;
overflow:hidden;
text-align: center;
border-bottom: 5px solid #993333;
}
.cockpit:before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 98%;
border-radius: 50%;
border-right: 5px solid #993333;
border-left: 5px solid #993333;
}
.cockpit h2 {
width: 70%;
margin: 120px auto 35px auto;
}
.fuselage
{
margin-left: 25px;
border-right: 5px solid #993333;
border-left: 5px solid #993333;
}
ol
{
list-style :none;
padding: 0;
margin: 0;
}
.row
{
}
.seats
{
margin-left: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 0 5px 0 250px;
}
.seat {
display: flex;
flex: 0 0 25.28571428571429%;
padding: 5px;
position: relative;
}
.seat:nth-child(3) {
margin-right: 15.28571428571429%;
}
.seat input[type=checkbox] {
position: absolute;
opacity: 0;
}
.seat input[type=checkbox]:checked + label {
background: yellow;
}
.seat input[type=checkbox]:disabled + label {
background: #dddddd;
text-indent: -9999px;
overflow: hidden;
}
.seat input[type=checkbox]:disabled + label:after {
content: "X";
text-indent: 0;
position: absolute;
top: 4px;
left: 50%;
transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled + label:hover {
box-shadow: none;
cursor: not-allowed;
}
.seat label {
display: block;
position: relative;
width: 70%;
text-align: center;
font-size: 11px;
font-weight: bold;
line-height: 1.5rem;
padding: 4px 0px;
background: green;
border-radius: 5px;
}
.seat label:before {
content: "";
position: absolute;
width: 75%;
height: 75%;
top: 1px;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.seat label:hover {
cursor: pointer;
box-shadow: 0 0 0px 2px #5C6AFF;
}
Could you please try seats class in below;
.seats
{
margin-left: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
margin: 0 5px 0 200px;
}
You can fix your margin-left in the following part of your code:
.seat {
display: flex;
flex: 0 0 25.28571428571429%;
padding: 5px;
margin-left: -50px; // lay seats over plane borders
position: relative;
}
With this customization, you can lay your seats over the plane.
This value is for demonstration purposes only and as an example
I'm trying to set up a little step progress bar that only has an icon for the current step. I've gotten so far as to have a default icon of sorts, but can't figure out how to clear it for non-active steps.
In the code below, I tried playing with pseudo classes but that didn't seem to work. I'm wondering if anyone can point me in the right direction. Thanks!
.step-indicator-container {
width: 600px;
margin: 100px auto;
}
.step-indicator li {
list-style-type: none;
width: 33.33%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.step-indicator li:before {
font-family: "FontAwesome";
content: "\f276";
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.step-indicator li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.step-indicator li:not(.active):nth-of-type(2) > *::before {
content: none;
}
.step-indicator li:first-child:after {
content: none;
}
.step-indicator li.active {
color: #0052e7;
}
.step-indicator li.active:before {
border-color: #0052e7;
}
.step-indicator li.active+li:after {
background-color: #0052e7;
}
For this answer, I am assuming the following is your HTML structure:
<div class="step-indicator-container">
<ul class="step-indicator">
<li></li>
<li class="active"></li>
<li></li>
</ul>
</div>
The issue is with the following declaration:
.step-indicator li:not(.active):nth-of-type(2) > *::before {
content: none;
}
This is targeting the ::before of a descendant of the li tag. However, you actually put your symbol on the ::before of the li tag itself, not a descendant. Therefore, that's what you need to be targeting. Furthermore, content: none eliminates the ::before, so you actually want content: "". Here's what I think you actually want:
.step-indicator li:not(.active)::before {
content: "";
}
And here's the full code snippet (note I replaced your symbol with the $):
.step-indicator-container {
width: 600px;
margin: 100px auto;
}
.step-indicator li {
list-style-type: none;
width: 33.33%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.step-indicator li:before {
content: "$";
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.step-indicator li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.step-indicator li:not(.active)::before {
content: "";
}
.step-indicator li:first-child:after {
content: none;
}
.step-indicator li.active {
color: #0052e7;
}
.step-indicator li.active:before {
border-color: #0052e7;
}
.step-indicator li.active+li:after {
background-color: #0052e7;
}
<div class="step-indicator-container">
<ul class="step-indicator">
<li></li>
<li class="active"></li>
<li></li>
</ul>
</div>
I would like to add line before li elements but not include after the last li. How could I do?
Here my CSS:
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400
}
ul.timeline > li {
margin-bottom: 10px 0;
padding-left: 10px
}
ul.timeline > li:not(:last-child):after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400
}
JSFiddle
With your current setup, you could set height of the :before line equal to 100% - li height . Or the last li height. This is not very responsive but without knowing what you really have in your project, this is the best ( imo ) solution.
Also you have margin-bottom: 10px 0 . That is not correct. I changed it to margin-bottom: 10px;
/* Timeline Changelogs */
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 31px;
width: 2px;
height: calc(100% - 52px);
z-index: 400
}
ul.timeline > li {
margin-bottom: 10px;
padding-left: 10px
}
ul.timeline > li:not(:last-child):after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400
}
<div class="col-12">
<ul class="timeline">
<li>
<p><b>20 Sept 2018</b></p>
<p>This is 20 Sept 2018</p>
</li>
<li>
<p><b>17 Sept 2018</b></p>
<p>This is 17 Sept 2018</p>
</li>
<li>
<p><b>11 Sept 2018</b></p>
<p>This is 11 Sept 2018</p>
</li>
<li>
<p><b>8 Sept 2018</b></p>
<p>This is 8 Sept 2018</p>
</li>
</ul>
</div>
OPTION 2. You could set the before line to the li elements except last-child, not to the ul. And set it a height 100% + 1em. Because in jsfiddle and snippet, p which is inside li has margin: 1em 0 by default. If you change that default margin you should consider that when setting the height.
Also, you need position:relative on li so the :before height is relative to the li not the ul. And so, you need to change the left values for the line and the circle. But it's easily adjustable.
/* Timeline Changelogs */
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline > li {
margin-bottom: 10px;
padding-left: 10px;
position:relative;
}
ul.timeline > li:not(:last-child):after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: -21px;
width: 20px;
height: 20px;
z-index: 401
}
ul.timeline > li:not(:last-child):before {
content: '';
background: red;
display: inline-block;
position: absolute;
left: -10px;
width: 2px;
height: calc(100% + 1em);
z-index: 400;
top:0;
}
<div class="col-12">
<ul class="timeline">
<li>
<p><b>20 Sept 2018</b></p>
<p>This is 20 Sept 2018</p>
</li>
<li>
<p><b>17 Sept 2018</b></p>
<p>This is 17 Sept 2018</p>
</li>
<li>
<p><b>11 Sept 2018</b></p>
<p>This is 11 Sept 2018</p>
</li>
<li>
<p><b>8 Sept 2018</b></p>
<p>This is 8 Sept 2018</p>
</li>
</ul>
</div>
Please make these changes to your css file:
/* Timeline Changelogs */
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline > li {
margin-bottom: 10px;
padding-left: 10px;
}
ul.timeline > li:not(:last-child)::after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 401
}
ul.timeline > li:not(:last-child)::before {
content: '';
background: red;
display: inline-block;
position: absolute;
left: 31px;
width: 2px;
height: 80px;
z-index: 400
}
There was some issue with height in your css and use ::before in li rather than in ul.
You can use this simple code:
ul {
margin-left: 10px;
padding: 0;
width: 100%;
border-left: 2px solid #999;
}
li {
list-style: none;
padding-left: 20px;
height: 100%;
margin: 0;
display: block;
position: relative;
}
li:last-child:before { /*With this you hide the last-child li line*/
content: '';
position: absolute;
left: -2px;
top: 0;
width: 2px;
height: 100%;
background-color: #fff;
}
li:after {
content: '';
position: absolute;
top: 0;
left: -12px; /*The half of the circle width minus the border width*/
border-radius: 50%;
border: 2px solid #22c0e8;
width: 20px;
height: 20px;
background: #fff;
}
<ul>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
</ul>
For hide the li:last-child line I've used a before pseudoelement that goes over the line and hides it. To position the circles I used an after pseudoelement that is located right in the middle of the line. To do this we start from left: 0 minus half of the width of the circle (10) minus the width of the line (2). Both pseudoelements on the li tag.
Hope it helps you!
If you keep the current HTML structure you can do it like in the code bellow. Just moving your before element to each LI element instead of the UL, and changing the margins and paddings of the P elements inside so the left border stretches accordingly.
ul.timeline > li:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: -9px;
width: 2px;
height: 100%;
z-index: 400
}
ul.timeline > li {
margin-bottom: 10px 0;
padding-left: 10px;
position: relative;
}
ul.timeline > li::after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: -20px;
top: 0px;
width: 20px;
height: 20px;
z-index: 400;
}
ul.timeline > li:last-child:before{
display:none;
}
ul.timeline > li > p{
margin-top: 0px;
padding-top: 0px;
}
ul.timeline > li > p + p{
margin-bottom: 0px;
margin-top: 0em;
padding-top: 0px;
padding-bottom: 1em;
}
http://jsfiddle.net/6tcgr9eq/
Remove the : before last-child and the :after and used
ul.timeline > li:not(:last-child):after {
border-bottom: none !important;
}