css - CSS - 順序付けられていないリストの箇条書き間の垂直線

Question

次のように、順序付けられていないリストの箇条書きの間に垂直線を引くにはどうすればよいですか。

行がリストの最後の箇条書きで停止していることに注意してください。list-style:none;と画像を箇条書きとして使用しています。HTML は次のようになります。

<ul class="experiences">

  <!-- Experience -->
  <li class="green">
    <div class="where">New York Times</div>
    <h3 class="what green">Senior Online Editor</h3>
    <div class="when">2012 - Present</div>

    <p class="description">Jelly-o pie chocolate cake...</p>
   </li>

   ...

要求された 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;
}

Answer 1

内側と外側の div を追加してから、マージンを調整する必要があります。ここに私が意味するものがあります

デモ: http://jsfiddle.net/kevinPHPkevin/N9svF/

ul {
    padding-left:14px;
    margin-top:-6px;
    margin-bottom:-6px;
    padding-bottom:0;
}
#mainDiv {
    height: 200px;
    width:200px;
    position: relative;
}
#borderLeft {
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 25px;
}