MonA: Pfeil unter h2, Border mit CSS erstellen

Beitrag lesen

Ich möchte meine Überschricht mit einem Pfeil nach unten versehen.

h2{
font-weight:bold;
font-size: 22px;
border-bottom: 1px solid #C0C0C0;
padding:0 0 10px 10px;
margin: 20px 20px 30px 0px;
}

h2:before{
content: ' ';
position: relative;
top:52px;
left:230px;
border: 15px solid #6E6E6E;
border-right-color:  transparent;
border-bottom-color: transparent;
border-left-color:   transparent;
}

Doch ich habe zwei Probleme bei denen ich nicht weiterkomme.

1. Ich möchte den Pfeil unten ausrichten.Im Augenblick mache ich das über top:52px;, abe rich muss gestehen ich habe die 52 erraten, und so sieht es auch in den untershciedlichen Brwosern aus.

2. ich möchte das die Überschrift einen Abstand zur Linken Seite hat, ich bekomme aber die Schrift und die Linie nicht bündig zusammen.

Zu allgemeinen Verständlichkeit habe ich ein Beispiel hier hinterlegt:

http://jsfiddle.net/W6jy3/

MonA