CSSBeforeおよびCSSAfter –Contentプロパティの使用方法

contentCSSのプロパティは、要素のコンテンツを定義します。このプロパティは::before::after疑似要素にのみ適用されると聞いたことがあるかもしれません。この記事ではcontent、疑似要素の外部を含む、プロパティのさまざまなユースケースについて説明します。

前提条件

contentプロパティのユースケースの大部分は疑似要素に関係しているため、::beforeおよび::after疑似要素の動作に精通していることをお勧めします。これはあなたをスピードアップするための素晴らしい記事です:

  • CSS疑似要素-セレクターの説明の前後

許容値

まず、contentプロパティの受け入れられたすべての値を見てみましょう。

  • normal:これはデフォルト値です。none疑似要素とともに使用される場合に計算されます。
  • none:疑似要素は生成されません。
  • :コンテンツを指定された文字列に設定します。この文字列には、Unicodeエスケープシーケンスを含めることができます。たとえば、著作権記号:\\000A9
  • :使用して画像や勾配にコンテンツを設定url()またはlinear-gradient()
  • open-quote| close-quote:コンテンツを、quotesプロパティから参照される適切な引用文字に設定します。
  • no-open-quote| no-close-quote:選択した要素から引用符を削除しますが、quotesプロパティから参照されるネストレベルをインクリメントまたはデクリメントします。
  • attr(*attribute*):選択された要素の選択された属性の文字列値としてコンテンツを設定します。
  • counter():コンテンツをaの値counter、通常は数値として設定します。

ストリング

最も基本的な例の1つは、要素の前後に文字列コンテンツを追加する方法です。この例では、リンクの前にリンクシンボルを追加し、その後にリンクのURLを追加します。

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

::before疑似要素のUnicode文字の後、および疑似要素の最初の括弧の前のスペースに注意してください::after。これにより、これらと親要素の間にスペースが作成されます。

または、疑似要素にpaddingまたはmarginを追加して、分離を追加することもできます。

基本的な見積もり

content財産、あなたが前および/または要素の後に引用符を追加することができます。これで、HTMLにタグができました。これにより、コンテンツの前後に引用符も追加されます。ただし、このcontentプロパティを使用すると、実装をより細かく制御できます。

引用符を追加する最も基本的な例は次のとおりです。

これは、HTMLタグを使用して行うこともできます。ただし、見積もりの​​スタイルを変えたい場合もあります。したがって、開始引用符のみを追加し、終了引用符は追加しないでください。また、冒頭の引用のスタイルも設定しましょう。

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

結果:

段落の左上に単一のスタイルの引用を示す画像

高度な見積もり

私たちがどこを指定することもできない引用符をしたいです。たとえば、別の人を引用している人を引用している場合があります。したがって、引用符の中に引用符が含まれていると、読者が混乱する可能性があります。

以下のCodePenでは、HTMLタグを使用しており、引用符を表示しないタグを指定しています。

一見すると、必要に応じてタグを削除するだけでよいと思うかもしれません。ただし、引用符を配置しない場所を指定することにより、quotesプロパティから参照されるネストレベルをインクリメントまたはデクリメントします。

これを説明するには、quotesプロパティを理解する必要があります。これは、引用するときに使用する必要がある文字の単なる「配列」です。次に例を示します。

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

これらは引用符のセットです。最初のセットは、トップレベルの見積もりに使用されます。2番目のセットは、最初のネストされた見積もりに使用されます。そして、3番目のセットは2番目のネストされた見積もりに使用されます。など、さらにセットが含まれている場合。

quotesプロパティを理解したので、no-open-quoteno-close-quoteプロパティがどのように機能するかを説明できます。

引用符のレベルごとに、引用符に使用するさまざまな文字セットを割り当てることができます。引用符を配置しない場所を指定することにより、quotesプロパティから参照されるネストレベルをインクリメントまたはデクリメントします。

以下の例を見てください。引用符の第2レベルがスキップされていることがわかります。

属性

属性を使用して、HTMLからCSScontentプロパティにコンテンツを渡すことができます。実際には、これをリンクの例ですでに使用しており、href属性を使用してコンテンツの一部としてURL文字列を含めています。

これの完璧なユースケースはツールチップです。titleHTMLの要素に属性を追加して、ホバー時にシンプルな組み込みのツールチップを設定できます。ただし、これをカスタマイズするには、HTMLタグのデータ属性を使用してcontentから、プロパティを使用してツールチップを追加します。

In this example, we use the attribute data-tooltip from our HTML element to pass the value into our tooltip. For the pointer of the tooltip, we set the content to "", as content is required to render a ::before or ::after pseudo-element.

Counters

The counter() CSS function returns a string representing the current value of the named counter. In the following example we have an ordered list that we will add content using a counter.

    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

    Without getting too in-depth on the counter function, we have to first initiate the counter on the ol element. We can name this whatever we would like. Then we tell the counter to increment on each li element. And lastly, we set the content of the li::after.

    Here's the result:

    注文リスト

    これを使用して、対応する番号が必要な各リストアイテム内のコンテンツをカスタマイズできます。または、これを使用してリストアイテム自体をカスタマイズすることもできます。たとえば、デフォルトのナンバリングを削除して、カスタムスタイルのナンバリングシステムを実装できます。

    画像

    contentプロパティで画像とグラデーションを使用できます。これはかなり簡単です。両方を使用する例を次に示します。

    アクセシビリティのために、画像の代替テキストを追加するオプションもあります。ただし、この機能は完全にはサポートされていません。

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    注:これは、Firefox、IE、およびSafariではサポートされていません。また、Firefoxではグラデーションは機能しません。

    疑似要素の外側

    そのとおり!content疑似要素::beforeとの外部でプロパティを使用できます::after。ただし、その使用は制限されており、すべてのブラウザで完全に互換性があるわけではありません。

    最も互換性のあるユースケースは、要素の交換です。

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    注:IEでは置換はサポートされていません。

    結論

    ほとんどの場合content: ""::beforeおよび::after疑似要素にあります。しかし、contentプロパティには多くの便利なアプリケーションがあります。

    私の意見では、バルク要素の更新に使用するのが最善の方法です。サイト上のすべてのリンクの前にアイコンを追加する場合contentは、HTMLドキュメントのすべての要素にアイコンを追加するよりも、プロパティを介してアイコンを追加する方がはるかに簡単です。

    読んでくれてありがとう!

    この記事を読んでいただきありがとうございます。うまくいけば、contentCSSでプロパティがどのように機能するかをよりよく理解するのに役立ちました。

    ジェシーホール(codeSTACKr)テキサスのジェシーです。私の他のコンテンツをチェックして、Web開発者になるためのあなたの旅をどのように手助けできるか教えてください。

    • 私のYouTubeを購読する
    • こんにちはと言う!Instagram | ツイッター
    • ニュースレターに登録する