7

コンテンツを含むクラスを作成しましたが、コンテンツは疑似クラスでのみ機能するようです。

コードを変更するにはどうすればよいですか?

http://jsfiddle.net/fuRKC/

button.follow{
    content: 'Follow';
}

button.followed{
    content: 'Unfollow';
}
4

3 に答える 3

6

現在の CSS 仕様では、この属性はおよび疑似要素contentにのみ適用されます。古い提案された拡張機能CSS3 Generated and Replaced Content Moduleがあり、これにより、プロパティを実際の要素にも適用できるようになります。ただし、この提案は 10 年前のものです。値が URL 表現であり、画像を参照していると解釈される特殊なケースを除いて、これは Opera でのみ実装されています。これは Chrome と Safari でもサポートされています。:before:aftercontent

さらに、要素がボタンの場合、Chrome では拡張機能が機能しないように見え、Opera では、生成されたコンテンツがボタン ウィジェット内ではなくそのまま表示されるため、ここではサポートが限定されていてもあまり効果がありません。

要素には空のコンテンツがあるためbutton、拡張機能は実際には必要ありません。空のコンテンツの場合、コンテンツを追加することはコンテンツを置き換えることと同じです。button.follow:beforeしたがって、この場合、キッピーの回答のように、を使用するだけで済みます。ただし、これは、CSS が無効になっている場合、ボタンが完全に空として表示されることを意味することに注意してください。

HTML のボタン テキストではなく、生成されたコンテンツを使用する理由が何であれ、JavaScript でコンテンツを変更するのがより確実な方法です。もちろん、JavaScript を無効にすることもできますが、実際のボタン テキストをフォールバックとして使用することもできます<button id=follow>Follow</button>。

于 2013-09-24T08:56:11.627 に答える
3

あなたは正しいです。および疑似クラスcontentでのみ機能します。次のようにcssを作成するだけです：:before:after

button.follow:before{
    content: 'Follow';
}

button.followed:before{
    content: 'Unfollow';
}
于 2013-09-24T08:28:58.350 に答える
0

「コンテンツ プロパティは、生成されたコンテンツを挿入するために、:before および :after 疑似要素と共に使用されます。」

http://www.w3schools.com/cssref/pr_gen_content.asp

より詳しい情報：

http://css-tricks.com/css-content/

于 2013-09-24T08:28:56.307 に答える