CSS - вертикальная линия между маркерами в неупорядоченном списке
Как бы я нарисовал вертикальную линию между пулями в неупорядоченном списке, например:
Обратите внимание, что строка останавливается на последнем маркере списка. Я'м используюlist-style:none;
и изображения как пули. HTML выглядит так:
New York Times
Senior Online Editor
2012 - Present
<p class="description">Jelly-o pie chocolate cake...</p>
...
Код CSS по запросу:
/* Experiences */
ul.experiences {
padding-left: 15px;
margin-top: -1px;
}
ul.experiences li {
padding-left: 33px;
margin-bottom: 2.5em;
list-style: none;
background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
}
ul.experiences li.green {
background: url('../img/misc/list-bullet-green.png') no-repeat;
}
ul.experiences li.blue {
background: url('../img/misc/list-bullet-blue.png') no-repeat;
}
ul.experiences li.pink {
background: url('../img/misc/list-bullet-pink.png') no-repeat;
}
.where {
font-size: 1.2857em; /* 18/16 -> 18px */
font-weight: 300;
display: inline;
margin-right: 0.5em;
}
.what {
font-size: 0.75em; /* 12/16 -> 12px */
font-weight: 700;
text-transform: uppercase;
color: #fff;
background-color: #444444;
display: inline-block;
padding: 0 12px;
margin: -5px 0.5em 0 0 !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.what.green {
background-color: #c4df9b;
}
.what.blue {
background-color: #6dcff6;
}
.what.pink {
background-color: #f06eaa;
}
.when {
float: right;
color: #b9b9b9;
font-style: italic;
}
.description {
display: block;
margin-top: 0.5em;
}