html - 多个 Logo 之间的 CSS 元素符号点

Question

我在 <div> 中有一组 Logo .代码如下所示，可在 fiddle 获得。 .

CSS

@font-face {
    font-family:'JustVectorRegular';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/justvector/justvector-webfont.eot');
    src: url('fonts/justvector/justvector-webfont.eot?#iefix') format('eot'), url('fonts/justvector/justvector-webfont.woff') format('woff'), url('fonts/justvector/justvector-webfont.ttf') format('truetype'), url('fonts/justvector/justvector-webfont.svg#webfontmuk63VQd') format('svg');
}
.social {
    padding:0;
    margin:2em 0;
    list-style:none;
    text-align: center;
}
.social li {
    display:inline-block;
    padding:0;
    margin-bottom: -3px;
}
.social li a {
    display:block;
    float:left;
    margin: 0 .1em .2em 0;
    line-height:100%;
    text-align:center;
    font-family:'JustVectorRegular';
    font-size:32px;
    padding: 8px 8px 8px 10px;
    min-width:27px;
    max-height:28px;
    color:#444;
    border-radius: 4px;
    border: 1px solid #ddd;
}

HTML

<ul class="social">
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
    <i class="icon-remove"></i>
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
    <i class="icon-remove"></i>
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
    <i class="icon-remove"></i>
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
    <i class="icon-remove"></i>
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
    <i class="icon-remove"></i>
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
    <i class="icon-remove"></i>
    <img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
</ul>

我想通过在每个之间放置一个元素符号点来分解它们，但是正如代码所描述的那样，它根据屏幕宽度包装 Logo ，并且一行末尾的元素符号点看起来是错误的。我想让代码在每个 Logo 之后插入一个元素符号点，除了行末尾的那个。

这可能吗？我真的被困住了，找不到任何帮助

谢谢:)

(如果我没有正确使用行话，我深表歉意 - 对我来说都是全新的)

Answer 1

你可以为除第一个元素之外的每个元素添加:before伪元素:

LI + LI:before {content: "*"; }