CSSの content プロパティーを使いこなそう！

CSSの content プロパティーを使いこなそう！CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何？content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTML などの文書には記述されていない要素を CSS によって新たに作り出された架空の要素です。Web クリエイターボックスでも、過去記事「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」や「経歴や会社の沿革ページに！簡単な CSS で

[wdr_s]

擬似要素は使いこなすと無駄なタグを削減できたり便利。ただ、飽くまで「DOM上に存在してるわけではない」ということを頭にいれておくべき。

[closedisland]

contentプロパティの存在は知っていたが詳しくは知らなかったからありがたい。

[sutanto1983]

content　使い方　css

[Hi32]

li { list-style: none; counter-increment : chapter; } li:before { content : "第" counter(chapter) "問"; }な使い方もあり

[kurotantan]

インクリメントは知らんかったのでメモ

[unko1973]

“CSSの content プロパティーを使いこなそう！”

[masapon49]

この使い方は便利そう

[bleu-bleut]

contentプロパティの値の改行は¥Aだって。

[lequinharay]

インクリメント知らんかった

[karasunekoneko]

CSS："CSSの content プロパティーを使いこなそう！"

[AmaiSaeta]

印刷用にURL出力は良いね。 | スタイルの有無で文意が変わってはダメだと思うので、引用文の括弧は地のテキストですべきだと考える。

[mikurins]

CSSもずいぶん便利になったもんだ。

[lait_9baka]

cssのcontentでattr(属性)みたいな表示できるの知らなかった。すごいな。使い道わからんけどｗ

[iRumors]

📎

[knakamura1977]

コピペができないのが残念だなぁ。

[ouest]

contentプロパティ

[s99e209]

これらの処理をするときは、扱い慣れているJavascriptで書いちゃうけど、CSS3で書いた方が断然高速で描画されるので、覚えておきたい。

[naga_sawa]

content プロパティの用途

[qrac_jp]

2016年度 プロジェクト用。

[thleap]

属性値を表示できるの知らなかった。content: attr(title) のように

[rouxril]

すごーい

[uasi]

印刷時のみリンクの横に URL を表示するの最高便利だ

[coolworld]

今度使ってみよう。

[nimroder]

知らないことだらけだった。面白い。

[dearwalker_yuya]

φ(・＿・）メモ。

[urarai]

便利そう

[yfnt]

CSSの content プロパティーを使いこなそう！ | Webクリエイターボックス

[hedeyoshi]

contentってここまで出来るんだ、すごい！

[nobuocreate]

分かりました！マナ先生！

[Pinon3s]

　contentの存在は知っていたけどこういう使い方ができるとは…