content_html/css_WEB-ITnose

content 属性は、生成されたコンテンツを Web ページの要素に挿入するために、::before および ::after 擬似要素とともに使用されます。

content 属性の値は、擬似要素を通じて要素に挿入されたコンテンツです。

content 属性を使用して挿入されるコンテンツは、テキスト文字列、記号、画像、カウンター (つまり、スタイル リスト)、または引用符です。同時に、複数の値を 1 つに結合することも可能です。値といくつかの詳細な例については、以下を参照してください。

content 属性は、::before および ::after 疑似要素のルールに含める必要があることに注意してください。そうでない場合、生成および挿入されません。つまり、常に content を含める必要があります。多くの場合、インスタンスの装飾に疑似要素を使用するだけで、コンテンツを追加したくない場合は、それを空に設定できます。 ::before と ::after のさまざまな使用例について詳しく読むことができます。

Notes

アクセシビリティ

擬似要素を使用してページに挿入されたコンテンツは DOM には挿入されません。視覚的にのみ表示されます。したがって、擬似要素を使用して生成されたコンテンツには、スクリーン リーダーでアクセスして読み取ることはできません。したがって、重要なコンテンツ (フッター コメント内の関連記事など) をページに挿入するために擬似要素を使用しないことをお勧めします。

疑似要素は主にスタイルを変更するコンテンツを挿入するために使用され、ページの整合性にとって重要なコンテンツを挿入するために使用されるべきではありません。

さらに、疑似要素を使用して挿入されたコンテンツは DOM に挿入されないため、JavaScript を使用してイベント ハンドラーを追加することはできません。

公式構文

構文

content: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

• 初期値: 通常
• 適用シナリオ: ::before および ::after 疑似要素
• アニメーション: なし

属性値

なし

コンテンツは挿入されていません。擬似要素は生成されません。

通常

::before および ::after 擬似要素を none に設定します。

98c455a79ddfebb79781bff588e7b37e

テキスト文字列。テキスト文字列は引用符で囲まれます。 98c455a79ddfebb79781bff588e7b37e のデータ型に使用できる属性値のリストを参照してください。

例: new クラスの要素 (製品リスト項目など) の後に「New!」コメントを挿入します。

.new::after {    content: "New!";    color: green;}

content 属性の後にエスケープ文字を記述して、生成されたコンテンツをラップすることもできます。また、この改行文字は依然として空白属性の影響を受けることに注意してください。

b3878c19b9109b5a703f8ec943eabc14

URI は url() 関数で指定されます。画像などの外部リソースを指します。リソースまたは画像を表示できない場合、ブラウザは指定されていないものとして終了するか、リソースが利用できないことを示す何らかのプロンプトを表示する必要があります。

たとえば、ページ上の Signup という名前のクラスを持つボタンにアイコンを追加します。

button.signup::before {    content: url(path/to/signup.png);}

b6deed87cf7fc8871cf4a24f18e9370a 要素には、リンクが指す場所を決定する href 属性があります。 content 属性は attr() 関数と組み合わせて使用​​され、href 属性の URL の値を取得します。これは非常に強力な関数です。これは、スタイルシートを印刷するときに使用して、リンクのコンテンツの後にリンクが指す URL を印刷します (::after 疑似要素を使用)。例:

q, blockquote {  quotes: "“" "”" "‘" "’";}q:before, blockquote:before {    content: open-quote;}q:after, blockquote:after {    content: close-quote;}

上記のルールは、(属性セレクターを使用して) すべてのリンクの href 属性を選択し、attr() 関数を使用してすべてのリンク属性の値を取得し、すべての値をそのコンテンツに設定します。 ::after 疑似要素、実装 リンクされたコンテンツの後にリンクを挿入します。

attr() 関数は、カスタム HTML5 data-* 属性を含む、要素の任意の属性の値を取得できます。例:

@media print {    a[href]::after {        content: attr(href);    }}

CSS3 では、attr() 式に新しい構文が追加されました。新しい構文は安定しておらず、すべてのブラウザでサポートされているわけではなく、文書化された使用例もありません。仕様には、新しい構文が候補の推奨段階から除外されるリスクがあるとも記載されています。新しい構文が破棄されない場合、このエントリは新しい値で更新されます。構文は次のとおりです:

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

d875a527c65a78c434907fcd295d82de 表示属性名称， 7b653387b6ab51aa449fa6e9a2ff1452 是一个可选的参数告诉用户代理如何解释这个属性的值，并为 attr() 表达式定义了一个类型。如果省略的话，'string' 就会被隐含。 e70a3ffc6110a9ee57e4bf8d517b9ed4 参数表示一个可用于回退的值，例如用于已命名的属性丢失，或其值不能解析成给定的类型，或使用了无效范围内的属性。如果它不存在，就会应用如下规则: 给定的默认值 < type-or-unit < (参考如下列表)。

unit 参数的值可以是以下之一: string , color , url , integer , number , length , angle (角度), time , or frequency (频率)。

如上文所述，如果新的表达式语法在将来不会被丢弃，此条目将使用详细的说明和示例更新此项。

注意事项

在 content 属性中是可以结合不同内容的。之后这些内容会连接为一个。例如，以下将从上面的例子检索自定义数据属性的值，并在其后面添加一个冒号︰

li::before {    content: attr(data-label) ":";    color: grey;}

下面的示例改善了上面那个检索链接的 href 值，将其打印在打印样式表中的例子。在链接内容后面不添加一些视觉分隔符可能会混淆读者，所以是将要打印的URL值包裹在一对括号之中是很好的选择。这可以通过在 attr() 函数前后结合两个括号字符串来实现，就像这样:

@media print {    a[href]::after {        content: " (" attr(href) ")";    }}

display 属性用于指定插入的内容为inline-level(内联级) 还是 block-level(块级)。默认情况下， ::before 和 ::after 伪元素为内联。

内容和样式的分离

除了可访问性问题，有些人可能会认为，通过CSS添加内容是为了使样式与内容分离，以帮助更好的维护代码。在大多数情况下可能如此，但它仍允许模块化的样式表。例如，上面示例中，通过粘贴代码片段，实现打印样式表上添加链接内容就是网站中一个很好的应用。

另外，比如在页面上所有的链接上插入一个“外部链接”图标，引用外部网页也是十分有用模块化的，并且维护这些样式和内容是相当容易的，所以通过CSS添加内容的概念可能对于一些较真的人难以接受，但它仍然是有用的。它是由CSS作者和开发人员来决定添加什么样的内容，而不会影响其代码的可维护性。

在线实例

下面的在线实例显示了 content 属性与 ::before 和 ::after 伪元素配合使用，插入生成的不同内容。

你可以在 ::before 和 ::after 看到更多的实例展示。

浏览器支持

所有主流浏览器都支持 content 属性:Chrome, Firefox, Safari, Opera, Internet Explorer, Android 和 iOS。

扩展阅读

• 内容生成,自动编号以及列表
• ::after
• ::first-letter
• ::first-line
• ::before

本文根据 @Sara Soueidan 的《 content 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://tympanus.net/codrops/css_reference/content/ 。

静子

在校学生，本科计算机专业。一个积极进取、爱笑的女生，热爱前端，喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博：@静-如秋叶