Seltsames Pseudoelemente-Beispiel

Aus dem CSS-Kochbuch, 3. Auflage

by Jens Grochtdreis

HTML

<div id="container">
    <h1>CSS-Kochbuch: Dritte Auflage</h1>
    <h2>Allgemeines</h2>
</div>

CSS

#container{
    margin: auto;
    padding-top: 20px;
    width: 600px;
}
h1, h2 {
    position: relative;
    margin-left: -20px;
    width: 80%;
}
h1:after, h2:after {
    position: absolute;
    left: 0;
    top: 100%;
    border-top: 10px solid #a20000;
    border-left: 20px solid transparent;
    content:"";
}