Webkrauts CSS-Counter

HTML

<dl>
    <dt>Ein Begriff</dt>
    <dd>Seine Definition</dd>
    
    <dt>Ein weiterer Begriff</dt>
    <dd>Seine Definition</dd>
    
    <dt>Noch ein Begriff</dt>
    <dd>Seine Definition</dd>
</dl>

CSS

dl {
    counter-reset: CSSkannZaehlen;
}
dt:before {
    counter-increment: CSSkannZaehlen;
    content:"Definitions. " counter(CSSkannZaehlen)": ";
}
dt {
    display: block;
    background: #777;
    color: #fff;
    padding: 5px;
    width: 300px;
}
dd {
    background: #222;
    color: #fff;
    padding: 5px;
    width: 300px;
    margin-bottom: 20px;
}