Css 列表中超过2行的尾随点

使用这个网站和其他网站，我创建了一个包含尾随点的工作列表。当所有的东西都在一条线上时，它的工作方式和我想要的完全一样。当左手文本跨越两行时，它的工作方式与我预期的一样

我一直坚持的是，当列表因为正确的文本而跨越两行时，背景不是我拥有的样式背景。相反，它默认为第二行开头部分的页面背景

以下是HTML代码：

<div id="upcoming">
<ul class=longleaders>
    <p>Upcoming Events</p>
    <li><span>APRA Annual International Conference - Las Vegas, NV</span>
        <span>July 30 – August 2, 2014</span>

    <li><span>aasp Summit 2014 And May the Forth be with you and you and you - Chicago, IL</span>
        <span>October 20-22, 2014</span>

    <li><span>Crazy Event/2015</span>
      <span>March 11-12, 2015</span>
</ul>
</div>

我被难住了。我想我必须在

span+span

中添加一些东西（比如

：before

），但我没有看到它

下面是它今天的屏幕截图。目标是使第一行的白色区域变成绿色，第二行的白色区域变成棕色，依此类推

下面是一个zip文件，其中包含我用来创建此文件的HTML5样板文件：

---

有什么想法吗？

有什么截图可以帮助我们想象你想做什么吗？你的HTML无效。必须关闭列表项

。@否。“如果结束标记后面紧跟着另一个

元素，或者如果其父元素中没有更多内容，则可以省略该结束标记。”

#upcoming p {
    margin: 0px;
    border-bottom: 2px solid #000;
    color: #fff;
    background-color: #f04e37;
    padding-left: 0.1rem;}
ul.longleaders {
    max-width: 35em; 
    padding: 0; 
    margin: 0; 
    list-style: none;
    overflow: hidden;
    border: 1px solid #000;}
ul.longleaders li:after {
    float: left; 
    width: 0; 
    white-space: 
    nowrap; 
    content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "}
ul.longleaders li {
    clear: both}
ul.longleaders span:first-child {
    padding-right: 0.33em;}
ul.longleaders span + span {
    float: right; 
    padding-left: 0.33em; 
    position: relative; 
    z-index: 1}

#upcoming li {
    padding: .1rem;
    color: #fff;
    clear: both;}
    #upcoming li:nth-child(even) {
            background-color: #a9cf37;}
        #upcoming li:nth-child(even) span + span {
            background: #a9cf37;}
        #upcoming li:nth-child(even) span:first-child {
            background: #a9cf37;}
    #upcoming li:nth-child(odd) {
            background-color: #71513a;}
        #upcoming li:nth-child(odd) span + span {
            background: #71513a;}
        #upcoming li:nth-child(odd) span:first-child {
            background: #71513a;}