読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

CSSの擬似要素である::beforeと::afterを使えば、表現の幅が広がるよ!

どうも!chuckです。

今回はCSSの擬似要素である、afterやbeforeに関して書いていきます。

 

www.htmq.com

 

www.htmq.com

 

 

こちら読みました!

www.slideshare.net

 

煽りタイトルですが、内容はふつうに勉強になりました!

その中でも、今回はafter要素・before要素について実践してみたのでメモ。

 

☆☆

 

皆さん、after, beforeつかってますか??(´ω`) 僕はまったく使っていませんヽ(=´▽`=)ノ

 

今までafter, beforeって文字を挿入するものだと思ってたんですよ!でも、試してみたらなかなか便利でした!

なので、今回は実用的かなと思われる使用法を紹介します。

 

基本的な使い方

まずは基本的な使い方を。

擬似要素は、ある要素に追加する形で記述します。

gista30138696d60b1dc15c6

例えばこんな感じ。boxというクラスを持ったDOMがあって、それに追加する形で::beforeと書きます。

ちなみに、contentプロパティは必須のようです。content=""と空でいいので書きましょう!

 

使えそうな使い方

3つほど試したのでメモ。

1,ラベル

f:id:chuck0523:20150802160005p:plain

::beforeで作成したのが右上の赤いラベルになります。斜めに傾けて影をつけているので、いかにもラベルって感じですよね!

これって、ついつい<div>タグを作ってラベル用のDOMを用意したくなりますが、CSSだけで実現可能だったんですね!とてもすっきりしましたし、上述のスライドの通り保守性が高まりました。

 

New!なんて文字を入れたらいかにもラベルって感じですねヽ(=´▽`=)ノ

 

2,キャプション

f:id:chuck0523:20150802160344p:plain

こちらもそこそこ使い道がありそう。画像の下部に半透明の黒いものがあります。これも::before要素で作成しています。

この中にコメントなんか入れたら、画像へのキャプションになりそうですよね!

 

3,詳細表示

こちらの画像なんですが、

f:id:chuck0523:20150802160715p:plain

マウスカーソルを合わせると、

f:id:chuck0523:20150802160732p:plain

このようになります。

 

これは::beforeと:hoverの合わせ技になります。中の文字列を変えることで色々な使い方ができそう!

 

おまけ

今回は画像コンテンツに限定しましたが、例えばこんな使い方もできます。

f:id:chuck0523:20150802161900p:plain

各々のリスト要素の先頭に、チェックマークをつけています。このチェックマークももちろん擬似要素の::beforeで作っています。

CSS的には、5px/10pxのボックスを作って、border-bottomとborder-rightのみ緑色で指定しています。そのボックスを45度傾けているので、チェックマークのように見えます。

 

まとめ

いやあ、便利ですね!擬似要素。

いざデザイン変更やレイアウト改修となったときに、DOM要素が少ないので修正が容易です。beforeとafterが使えるとぐっと表現の幅が広がりそうですね!ヽ(=´▽`=)ノ

 

 

DEMO

f:id:chuck0523:20150802162607p:plain

http://chuck0523.github.io/front-end-coding/cssAfterBefore/index.html

 

書いたコード

gistf2a2c8d6854337db91ad

 

gistc72046d125b76cfd22af

 

 

FollowMe!