Para geeks de semântica …
USE SCSS
@import "compass/utilities/lists/inline-block-list";
@mixin comma-list {
@include inline-block-list-container;
li {
@include inline-block-list-item;
&:after {
content:' 02C 000a0';
}
&:last-child:after {
content:'';
}
&:last-child:before {
content:' and ';
}
}
}
@mixin no-oxford {
&.no-oxford {
li:nth-last-child(2):after {
content:' 000a0';
}
}
}
ul.comma-list {
@include comma-list;
}
ul.comma-list.no-oxford {
@include comma-list;
@include no-oxford;
}
DE MODO A
<ul class="comma-list">
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
RENDERS
John, Paul, George e Ringo
E
<ul class="comma-list no-oxford">
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
RENDERS
John, Paul, George e Ringo