HTML: Списки, Подсписок и Псевдо элементы

Question

Мне нужно создать список, подобный: http://jsfiddle.net/BkBZJ/

Только без дополнительной разметки в HTML (SPAN тегов с классами или вложенных списков в списках).
Кто-нибудь знает, как я могу добиться этого, скажем, с псевдо-элемента, как перед/после, последний ребенок, п-го ребенка и т.д. ...

или это не возможно без дополнительной разметки в HTML.

Answer 1

Ну вы всегда можете использовать: п-й ребенок (х), где х это один вы хотите изменить, а затем применить к нему маржу слева, а также цвет: изменить его.

например: http://jsfiddle.net/PcA4u/

Answer 2

Просто сделать the following (JSFiddle):

CSS

body { 
    background: #202024; 
    color: #FFF; 
    font: .75em Arial, san-serif; 
} 

h1 { 
    font: 1.25em Arial, san-serif; 
    text-transform: uppercase; 
} 

#education dt { margin-top: 15px;} 
#education dd { 
    text-indent: 25px; 
    color:#C5B7A6; 
} 
/* Add the dashes where appropriate */ 
#education dd:before { 
    content: "- "; 
    display: inline-block; 
} 
/* Override the styles for specific dds */ 
#education .co {color:#FFF; margin-left:50px;} 

/* Or, alternately if all except the first dd should be white */ 
#education dd:first-child { color: #C5B7A6; margin-left: 0; } 
#education dd { color: #FFF; margin-left: 50px; } 

HTML

<div id="education"> 
<h1>Education</h1> 
<dl> 
    <dt>Holmsglen Institute of TAFE</dt> 
     <dd>Certificate II &amp; Certificate III of Multimedia</dd> 
    <dt>RMIT University</dt> 
     <dd>Advanced Diploma Of Interactive Media</dd> 
    <dd>2D Animation Major</dd> 
    <dt>Swinburne University</dt> 
     <dd>Bachelors Degree of Digital Media</dd> 
     <dd class="co">Branding &amp; Advertising Co-Minor</dd> 
     <dd class="co">Motion Graphics Co-Minor</dd> 
</dl> 
</div>​