Create box with title/legend, in CSS

Question

As a follow-up to this previous question, I'd like to add a title to a <pre> box, indicating what kind of code is inside it (e.g. R, sh, perl, ...). But I can't use a <div> as in the previous question, because the <pre> is generated by another tool (org-mode export). It looks like this:

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

So I'm hoping to create a src-R class that adds an R title to the <pre> box, in pure CSS, or if that's not possible, using some additional Javascript.

Any pointers appreciated!

Answer 1

You can do it using only CSS with .src-R:before.

See: 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 works in IE8+ and all modern browsers.

If you need IE7 or lower support, JavaScript will be needed.