html - 在列表项之间使用悬停和间距堆叠背景颜色

Question

我想要一个背景有点透明的列表，以及一个包含具有自己背景颜色的跨度的列表项。我想要 li 之间的间距，但要保留的颜色和悬停只占用跨度容器的高度(而不是完整的 li)标记是这样的:

<div>
  <ul>
    <li><span>hello</span></li>
    <li><span>world</span></li>
  </ul>
</div>

这是CSS:

ul {
  list-style:none;
  background: rgba(255, 0, 0, .5);
}
li {
  margin-left: 20px;
}

li:hover {
  background: gray;
}

span {
  border-top: solid rgba(0,255,0,1) 5px;
  display: inline-block;
  width: 80%;
  height: inherit;
  background: rgba(0,255,0,1);
}

span:hover {
  background: gray;   
}

只有当您尝试将鼠标悬停在元素上时，li 的高度大于 span 的高度才会出现问题。另一个限制是 ul-li 标记是固定不变的。但是，我可以更改 li 中的任何内容(因此不需要跨度)。

jsFiddle:

http://jsfiddle.net/zGzgh/2/

当前状态(悬停在问候列表项上):

仍然是 Not Acceptable 状态(悬停在 hello 列表项上)

期望状态(悬停在问候列表项上):

如果您需要更多信息，请告诉我。

Answer 1

我想我已经明白了。伪元素来拯救...

JSFiddle Demo

HTML

<div>
    <ul>
        <li>
            <span>
                hello
            </span>
        </li>
        <li>
            <span>
                world
            </span>
        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

uli, li {
    margin: 0;
    padding: 0;
}

ul {
    list-style:none;
    background: rgba(255, 0, 0, .5);
    overflow:hidden; 
}
li {
    margin:0 auto;
    background: rgba(0,255,0,1);
    width: 80%;
    height:50px;
    padding-top:10px;
}

span {
    display:block;
    line-height:30px;
    height:30px;
    position:relative;
    cursor:pointer;
}

span:hover,
span:hover:after {
    background:grey;
}

span:after {
    position:absolute;
    content:"";
    top:0;
    left:100%;
    width:100%;
    height:100%;  
}