疑似要素を使ったhover表示のCSSを分解する

See the Pen css sample item-list by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

以上のサンプルはhover時の表示に擬似要素（:after）を使っています。このCSSについて分解して紹介します。
コードのサンプルというよりCSS装飾の考え方の参考になれば。

概要

CSSでやることを言葉でざっと分解すると以下になります。

1. a:after を半透明フィルムのように a 全体を覆うようにする
2. a:after に Fontawesome のアイコンを出す
3. a:after は平時は透明にする （opacity:0）
4. a:hover で a:after を表示させる （opacity:1）

※完成像が頭の中に（or絵として）あったうえで、こんな風にすれば出来るやろ！という手順をイメージします。

CSS

サンプルから抜粋して紹介します。 HTMLはシンプルなので Codepen を参照してください。

.item-list a {
  display: block;
  position: relative;
  color: #000;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

上記は a タグへのCSS。ブロック化してサイズ固定しているのみですが、注意すべき点は position:relative をかけているところ。 これは a タグの範囲内で a:after を position:absolute で制御するための下準備です。　この辺りは absolute 操作に慣れている人であれば定石だと思います。

次に本題の a:after へのCSSです。

.item-list a:after {
  /* 概要1にあたる */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);

  /* 概要2にあたる */
  font-family: FontAwesome;
  font-size: 32px;
  content: "\f002";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

  /* 概要3にあたる */
  opacity: 0;
  box-shadow: inset 0 0 30px 15px rgba(0, 0, 0, 0.3);
  transition: all .5s ease;
}

冒頭の概要にあたる部分ごとに分解します。

概要1にあたるCSS

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);

position:absolute をかけ a タグの中いっぱいに広げ、黒い半透明の背景を指定しています。

半透明にしたい時 opacity を使うケースもありますが、背景色だけ半透明にする場合は background:rgba() を推奨します。 opacity では要素自体が半透明になるので、中のフォントなども影響を受けるためです。

概要2にあたるCSS

  font-family: FontAwesome;
  font-size: 32px;
  content: "\f002";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

フォントにFontAwesomeを指定した後、content: "\f002" で虫めがねに当たるアイコンを指定しています。 display:flex 以後については、アイコンを要素のど真ん中に配置するためのスタイルです。

概要3にあたるCSS

  opacity: 0;
  box-shadow: inset 0 0 30px 15px rgba(0, 0, 0, 0.3);
  transition: all .5s ease;

opacity:0 を指定することで平時は透明にしています。

要素を消すなら display:none の方が確実ですが、transition を使いアニメーションさせたかったので opacity を使っています。 CSSアニメーションは数値化できるものしかアニメーションできず、 display:block と display:none の切り替えではアニメーションができないためです。

box-shadow は飾りのビネット表現のため、 transition はhover時にフワッとアニメーションさせるため指定しています。

概要4にあたるCSS

a:hover した時の a:after のCSSです。

.item-list a:hover:after {
  opacity: 1;
}

「a:hover時のa:after」という指定は a:hover:after と連結して指定できます。

opacity:1 にするのみで終了です。