列表中的尾随点超过2行

Question

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

我坚持认为，当列表由于正确的文本而跨越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>

CSS：

#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;}

我很难过。我想我必须向:before添加一些东西（比如span + span），但我没有看到它。

以下是今天的截图。目标是使第一行中的白色区域为绿色，第二行中的白色区域为棕色，依此类推。 http://goo.gl/YbrtTc

这是一个zip文件，其中包含我用来创建此文件的HTML5 Boilerplate文件：http://goo.gl/htdDVo

有什么想法吗？