将换行符与：选择器前对齐

Question

我有五个项目在各自的内容中都有不同的内容：在选择器之前。我的目标是让换行符与项目的第一个字符对齐，而不是前选择器。

这是我所拥有的一个工作小提琴：http://jsfiddle.net/64hEn/

...和代码：

<div>
    <ul>
       <li class="first">This is something in a list</li>
       <li class="second">This is something in a list longer here that is long</li>
       <li class="third">This is something in a list this is another thing</li>
       <li class="fourth">This is something in a list something</li>
       <li class="fifth">This is something in a list this one is really really long and it could go on forever</li>
    </ul>
</div>

div{
    width: 200px;
}

ul{
    list-style: none;
}

.first:before{
    content: "First";
    font-weight: bold;
    color: #999;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
}    

.second:before{
    content: "Second";
    font-weight: bold;
    color: #777;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
}

.third:before{
    content: "Third";
    font-weight: bold;
    color: #555;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
}

.fourth:before{
    content: "Fourth";
    font-weight: bold;
    color: #333;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
}

.fifth:before{
    content: "Fifth";
    font-weight: bold;
    color: #000;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
}

这是我想要的快速模型：

Answer 1

尝试做这样的事情。我稍微清理了你的重复CSS。我需要添加一个span元素来获得所需的外观。

http://jsfiddle.net/XbxhZ/

<li class="first"><span>This is something in a list</span></li>

.magic ul li span {
    display:inline-block;
    vertical-align:top;
    width:100px;
}

.magic ul li:before {
    font-weight: bold;
    color: #555;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
    width:50px;
    display:inline-block;
    vertical-align:top;
}

而不是在CSS中硬编码“第一，第二，第三”。您可以在CSS中使用动态内容选择器，以便使用类名本身作为标签。

.magic ul li:before {
    font-weight: bold;
    color: #555;
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #ccc;
    width:50px;
    display:inline-block;
    vertical-align:top;
    content: attr(class);
}