在CSS中创建带标题/图例的框

Question

作为后续行动,这一先前的问题,我想一个标题添加到一个<pre>对话框,提示什么样的代码是里面(例如R,sh,perl,...).但我不能<div>在前一个问题中使用as,因为它<pre>是由另一个工具(org-mode export)生成的.它看起来像这样:

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

所以我希望创建一个src-R类,在纯CSS中R为<pre>框添加标题,或者如果不可能,则使用一些额外的Javascript.

任何指针赞赏!

Answer 1

你可以只用CSS做.src-R:before.

请参阅: 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适用于IE8 +和所有现代浏览器.

如果您需要IE7或更低版​​本的支持,则需要JavaScript.