7

私は content:cssでプロパティのさまざまな可能な用途に関する最新情報を見つけようとしていますが、2004年かそこらのウェブの古代のダンジョンでしか見つけられないので、2011年にもう一度質問する必要があると思いました:

p:before {
content: url(dingdong.png);
}

p:before {
content: "some text ";
}

私は:beforeセレクターとcontent:プロパティの両方に非常に慣れていないため、素敵な女性が非常に創造的に答えたこの質問で偶然それを聞きました。

イメージやスパン タグを使用せずに、CSS を介して UL/LI html リストで箇条書きの色を設定する方法

コンテンツの実際のエンコーディングに関していくつかの問題が発生する可能性があることを確認するためだけに:

li:before{ content: "■" } この特殊文字を電子メールひな形のいじめっ子としてエンコードする方法は?

そして、私の具体的な質問は次のとおりです。 と 以外url()に"text"、他の可能性はありますか?
ご提案やアイデアをいただき、誠にありがとうございます。

4

3 に答える 3

14

ああ、リストするには多すぎます。最も一般的なケースのいくつかは次のとおりです。

  • およびプロパティcounter()とともに、関数を使用した特別な番号付けcounter-resetcounter-increment

  • 純粋な CSS クリアフィックス:

    .foo:after {
    content: "";
    display: block;
    clear: both;
}

  • 印刷スタイルシートのハイパーリンクの URL を印刷するなどの表示属性

    a[href]:after {
    content: ' (' attr(href) ') ';
}

  • 見栄えを良くするため、HTML に含めるべきではないタイポグラフィの装飾を追加します。たとえば、私のブログでは、投稿間の装飾やサイドバー リンクに使用しています。

  • ハイパーリンクが指している場所に応じて、ハイパーリンクにアイコンを追加します。

    a[href^="http://twitter.com/"]:before {
    content: url('twitter-icon.png');
}

  • CSS のみの吹き出しを作成するためのポインターの追加:

    .bubble {
    position: relative;
    background: silver;
}

.bubble:after {
    content: "";
    border:10px solid transparent;
    border-top-color:silver;
    position: absolute;
    bottom:-20px
}

そして、他にもたくさん。

ただ気をつけてください: 何かが見栄えが悪い場合は、おそらく HTML に含まれているはずです。ユーザーは CSS で生成されたコンテンツを選択できず、スクリーン リーダーはそれを無視します。

于 2011-03-16T04:11:14.743 に答える
1

カウンターも使えます。http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counterを参照してください。

選択した要素の特定の属性を表示することもできます。http://jsfiddle.net/EcnM2/を参照

開始引用符と終了引用符を追加または削除することもできます。

w3schools コンテンツ プロパティ リスト: http://www.w3schools.com/css/pr_gen_content.asp

于 2011-03-16T03:52:09.167 に答える
1

生成されたコンテンツはスクリーン リーダーによって認識されないため、アクセシビリティの問題に注意してください。
content非常に便利ですが、このテキストは情報を伝達し、装飾的であるだけではないため、HTML コードに含める必要がある場合があります (CSS の背景画像とimg空でない alt 属性を持つ有益なものに少し似ています)。

  • :after とコンテンツは、追加の div なしで clearfix として使用できます
  • :before と :after は、CSS3 機能を理解していないブラウザーに複数の背景 (要素自体で最大 3 つ) をもたらします。

編集: コンテンツの助けを借りて、リンクの href 属性をテキストとともに印刷することについて、A List Apart の Eric Meyer の記事を忘れていました (その後、 JS の改善が行われました)。

于 2011-03-16T03:53:10.707 に答える