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

Question

作为this previous question的后续内容，我想在<pre>框中添加标题，指明其中包含的代码类型（例如R，{{ 1}}，sh，...）。但我不能像上一个问题那样使用perl，因为<div>是由其他工具（org-mode export）生成的。它看起来像这样：

<pre>

所以我希望创建一个<pre class="src src-R"> here <- is(the=code) </pre> 类，在纯CSS中为src-R框添加R标题，或者如果不可能，则使用一些额外的Javascript。

任何指示赞赏！

Answer 1

您只能使用带有.src-R:before的CSS。

请参阅： 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有效in IE8+ and all modern browsers。

如果您需要IE7或更低版​​本的支持，则需要使用JavaScript。