La création d'une frontière comme ceci en utilisant :before Et :after Pseudo-Éléments CSS?

Objectif

Je veux être en mesure de créer une frontière comme cette dans le css, peut-être à l'aide de pseudo éléments, puis une image d'arrière-plan.

Code

HTML

<div id="footer"></div>

CSS

#footer {
    background: #4b4b4b;
    color: #868686;
    padding: 0;
    position: relative;
    height: 100px;
    width: 900px;
}

#footer:before {
    content: "";
    display: block;
    width: 220px;
    background-color: #e1e1e1;
    height: 8px;
}
Code existant?
Obtenez un jsfiddle pour vous, j'ai réussi à obtenir l' :avant à la sortie de la première frontière.
jsFiddle
Ne pas utiliser l'identifiant de CSS! Il souffle loin la spécificité de!!

OriginalL'auteur Shoebox | 2012-04-15

  1. 1
    #footer:after
{
   content: "";
    width: 40px;
    height: 3px;
    background-color: #529600;
    left: 0;
    position: relative;
    display: block;
    top: 10px;
}
    Pouvez-vous revenir sur votre réponse? Afficher seulement le code est souvent pas assez.
    ce code jeu :après les Pseudo-Éléments CSS pour h4.

    OriginalL'auteur Virendra Yaduvanshi