意外と知らないcontentの使い方

• Web Create
• 2016.12.01

こんにちわこんばんわ、ちばです。

残すところ今年も後一ヶ月ですね。

みなさんは今年はどんな一年になりましたか？

私は今年は上京したりトライムに入社したりと忙しい1年でした。
トライムに入社してからは笑うことも増えた気がします。
そして体脂肪も増えた気がします…ヽ(ﾟ∀｡)ﾉ

さて、今回は普段何気なく使っている疑似要素のcontentプロパティ。
このcontentで使えるプロパティの紹介です。

contentの使い方

まず最初は普通によくある使用方法ですね。

普通にcontent内に画像とテキスト挿れてるだけですね。
意外と知らなかったりしますがこのようにcontent内は複数の指定をすることもできるんです。

aタグの属性を出力

次は疑似用でaタグのリンク先URLを出力してみます。

これは「トライムブログ」がHTMLの記述で、その後が擬似要素になります。

CSSを見てみると、「attr(href)」という記述があると思います。
この記述で要素内の属性を指定して出力することができるようになります。

また、title属性を使ったりすれば下記の用に自由なテキストを挿入することも可能になります。

See the Pen content02 by chiba0122 (@chiba0122) on CodePen.

要素に連番を振る

まずは下記のサンプルをみてください。

See the Pen content03 by chiba0122 (@chiba0122) on CodePen.

これはcounterというプロパティを使い「◯番目」という文字を擬似要素で出力しています。

「counter-increment:hoge;」の形で要素にカウンターの名前をつけてあげます。
hogeは自由な文字列で大丈夫です。

次に番号を振る疑似要素に「content:counter(hoge);」の形で記述してあげると、要素が後続する度に値を１つ進めてくれます。

counterについてはブログなどのランキングなどのコンテンツで使えたりするので、便利ですね。

まとめ

最近疑似要素の便利さを改めて知ったのでいろいろ紹介してみました。

疑似要素を使えばHTMLは最小限の記述でいろいろな表現ができるようになりますね。

是非機会があれば使ってみてください。