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

发布于 2024-12-01 04:19:03 字数 626 浏览 2 评论 0原文

作为上一个问题的后续，我想为

< 添加一个标题/code> 框，指示其中的代码类型（例如，R、sh、perl，...）。但我不能像上一个问题一样使用  ，因为  是由另一个工具生成的（组织模式导出）。它看起来像这样：

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

所以我希望创建一个 src-R 类，将 R 标题添加到

 框中，在纯CSS中，或者如果不可能的话，使用一些额外的Javascript。

任何指示表示赞赏！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看春风乍起 2024-12-08 04:19:03

您可以仅使用带有 .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 在 IE8+ 中有效和所有现代的浏览器。

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

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.

回复收藏 0 原文

~没有更多了~