Box mit Titel/Legende erstellen, in CSS

Question

Als Folgemaßnahme zu diese vorherige Frage Ich möchte einen Titel zu einem Dokument hinzufügen. <pre> Box, die angibt, welche Art von Code sich darin befindet (z. B. R , sh , perl , ...). Aber ich kann nicht eine <div> wie in der vorhergehenden Frage, weil die <pre> wird von einem anderen Werkzeug erzeugt ( org-mode exportieren ). Das sieht folgendermaßen aus:

<pre class="src src-R">
here <- is(the=code)
</pre>

Ich hoffe also, dass ich eine src-R Klasse, die eine R Titel zum <pre> Box, in reinem CSS, oder wenn das nicht möglich ist, mit zusätzlichem Javascript.

Jeder Hinweis ist willkommen!

Answer 1

Sie können es nur mit CSS machen mit .src-R:before .

Voir : http://jsfiddle.net/thirtydot/myAhS/

.src-R:before {
    content: 'R'
}
.src-Perl:before {
    content: 'Perl'
}
.src:before {
    position: absolute;
    top: -10px;
    background: #fff;
    padding: 5px;
    border: 1px solid #000
}
.src {
    position: relative;
    padding: 25px 9px 9px 9px;
    border: 1px solid #000
}

:before Werke in IE8+ und allen modernen Browsern .

Wenn Sie die Unterstützung von IE7 oder niedriger benötigen, wird JavaScript benötigt.