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

mouse-note

デザインの勉強をしています。初めてのブログなのでゆるくやっていきます。

擬似要素を調べてみた

f:id:micchimouse:20170501002339j:plain

HTMLやCSSを勉強したり、サイト模写をしててコードを見ている時。
たびたび目にする::afterや::before。

 

なんじゃこれ。

 

使い方を知らなかったので調べてみました。

 

 「::after」「::before」でできること

擬似要素には幾つか種類があるけど、今回はよく目にする、「::after」と「::before」について調べてみました。調べてみると以外と単純なものだった。二つの要素についてまとめると

 

f:id:micchimouse:20170501002351j:plain

 

HTMLやCSSについて調べるとき、大体はMDNで調べています。会社の先輩に教えてもらいました。

developer.mozilla.org

developer.mozilla.org

 

CSSの書き方は
selector::擬似要素 {
property: value;
}

ふむふむ、まあ書いてみよう…

 

コードを書いてみた

 

See the Pen Pseudo-elements_sample01 by micchimouse (@micchimouse) on CodePen.


今回はリストの左にある丸を擬似要素::beforeを使って表現してみました。このように擬似要素を使うと、リストや見出しにちょっとした装飾を追加することができます。

また擬似要素::beforeの位置をコントロールするのは、positionプロパティでコントロールしました。 

positionプロパティ

今回、親要素にposition:relativeが、子要素にposition:absoluteが指定されているので、親要素の左上が子要素の基準位置(座標0,0)になります。つまり、display:blockでブロック要素になったa要素の左上を基準に、上から17px、左に20pxの位置に::before要素が配置されることに。

 

感想

思ってたより擬似要素は難しくなかった。むしろ考え方が分かれば簡単。これからどんどん使っていきたい。

今回のコードにも書いたけど、擬似要素と名前が似ている擬似クラスというものもある。例えば:hoverなど。なんとなく使っているけど、今度擬似クラスについてもちゃんと調べてみようかな〜。 

もっと勉強してアウトプットしたいですね。