HTML：列表、子列表和伪元素

我需要创建一个类似以下内容的列表：

仅限，没有HTML中的额外标记（列表中带有类或嵌套列表的跨标记）。
有人知道我可以实现这一点的方法吗，比如使用一个伪元素，比如before/after、last child、nth child等等

或者，如果没有HTML中的附加标记，这是不可能的。

只需执行以下操作：

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>​

教育类
霍姆斯格伦技术学院
二级证书及；多媒体证书III
RMIT大学
互动媒体高级文凭
二维动画专业
斯文伯恩大学
数字媒体学士学位
品牌及；小调广告公司
小电影公司
​

您可以始终使用：n子项（x），其中x是您要修改的子项，然后在其上应用左边距以及颜色：更改

---

例如：

谢谢你的快速回复，肖恩，我希望避免添加更多的类和寻找一种伪方法来解决这个问题。这可能是万不得已的办法。@Rob-请参阅我的编辑，以了解在不使用后面

dd

元素上的类的情况下执行此操作的方法。（只需使用

：first child

更改第一个

dd

的显示方式即可）。到目前为止，我能得到的最好结果是。我不确定如何使用你的方法：first-child来准确定位第二个dd。这对我在noah之后的工作不起作用，但无论如何谢谢你。我误解了如何正确使用这个建议…使用提供的这个答案，并将其稍作修改，以使其对HTML更为精简，我可以做到这一点：谢谢Noah

：：before

和

：：after

是伪元素，而

：last child

和

：nth-child（）

是伪类。它们是两个不同的东西；不要把它们混在一起。