css - CSS のみで div の上部にタイトル バナーを追加する

Question

下の画像のように、そのダイビングのバナーのようにテキストが表示されるタイトルを追加しようとしています。

問題は、CSS でタイトル テキストを設定する必要があることです。その中にコンテンツを含む単一のdivがあります。HTMLコードを変更して何かを追加することはできません。

何か案は？

Answer 1

before次のような疑似要素でそれを行うことができます：

.your_div:before {
    content: "Your DIV title";
    display: block;
    color: #000;
    background: #CCC;
    text-align: center;
}

ただし、古いブラウザには対応していません。