3

次のように定義されたHTMLを想定します

<div>
  <div class="runtime"> Some Important Text.Insert "Important" Before This </div>
  <div class="normal"> General Text </div>

</div>

したがって、一般的に出力は次のようになります

いくつかの重要なテキスト。この前に「重要」を挿入してください

一般的なテキスト

しかし、レンダリングした後、それは私たちに表示されるはずです

重要な生成コンテンツ

いくつかの重要なテキスト。この前に「重要」を挿入してください

一般的なテキスト

私はcssソリューションのみを探しています。

4

6 に答える 6

4

あなたはこれを探しています

.runtime:before{
    content: "Important Generated Content";
    font-weight: bold;
    display: block;
}

はい、margin-bottom他の回答が示唆するようにいくつか追加することができます。コードを直接変更すると、盗用を犯したいと思います。ここに注釈を付けてください。

あなたは推測するかもしれません、前にあります、後にありますか？
答えはイエスです！

あなたは次のようなことをすることができます

.importantStuff:after{
    content: "!!!!!";
}

これにより、クラス!の最後にsが追加されますimportantStuff

最後に、すべての要素は1つ だけを持つことができるbeforeので、それらを賢く使用してください。そしてCSSの使用を楽しんでください。 after

于 2013-03-05T10:06:03.480 に答える
4 
.runtime:before {
    content: "Important Generated Content";
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}

このjsFiddleをご覧ください。

于 2013-03-05T10:06:26.063 に答える
3

プロパティで疑似クラス:beforeを使用できcontentます。

.runtime:before { 
    content:"Important!";
    font-weight: bold;
}

ここでブラウザのサポートを表示できます：http：//caniuse.com/#feat=css-gencontent

このプロパティのもう少しの情報とより良い理解のために、このガイドを見てみたいと思うかもしれません！特殊文字の使用などについて説明しています。トランジションやアニメーション化はできないことに注意してください。

于 2013-03-05T10:06:51.093 に答える
2

疑似クラスを使用する

.wrap:before{
    content:"Important Generated Content";
    font-weight:bold
}

デモ

于 2013-03-05T10:06:07.960 に答える
0

jqueryも使用できます...

$('.runtime').before('<p>Test</p>');
于 2013-03-05T10:07:44.143 に答える
0

CSSはページのコンテンツを変更できません。これにはJavaScriptが必要です。ただし、:before疑似要素を使用して、要素の前に「偽の」要素を作成し、contentCSSルールを使用してコンテンツを追加することができます。

.runtime:before{
    content: "Important Generated Content";
    font-weight: bold;
}

CSSはページにコンテンツを挿入することを意図しておらず、「スタイル」を設定するだけであるため、これに問題がある人もいます。これをJavaScriptよりもCSSで行う方が確かに便利です。これには大きな欠点があります。支援技術を使用するユーザーは、このブログ投稿の概要として問題が発生する可能性があり、疑似要素内で生成されたコンテンツは読み取られません。

別の方法は、JavaScriptを使用してラベルを生成することです。この例では<p>、クラスを持つすべてのタグの上に要素を作成します.important。

jsFiddleで見る

HTML

<div class="important">I'm very important</div>
<div>I'm not</div>
<div class="important">I'm very important</div>

jQuery

$(document).ready(function () {
    $('.important').before('<div class="important-notice">Important!</div>');
});
于 2013-03-05T10:27:51.257 に答える