Создать поле с заголовком / легендой в CSS

Question

В качестве продолжения этого предыдущего вопроса я хотел бы добавить заголовок в поле <pre>, указывающее, какой код находится внутри него (например, R, * 1005).*, perl, ...).Но я не могу использовать <div>, как в предыдущем вопросе, потому что <pre> генерируется другим инструментом ( экспорт в режиме org ).Это выглядит так:

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

Итак, я надеюсь создать класс src-R, который добавляет заголовок R к блоку <pre> в чистом CSS,или, если это невозможно, используйте дополнительный 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.