00:23・2022/08/14
擬似要素を使ってみる〜「:before」「:after」編〜
01:28・2020/12/20 公開
01:30・2020/12/20 更新
新たに実装した「pin」と「new」の実装方法について解説します。
↓「new」の表示期間についてはこちらで↓
WordPressで更新日からの経過時間を反映する
コード
「pin」のコード
/* 固定投稿 */
article {
position: relative;
}
article.sticky:after {
content: "pin"!important;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
top: -14px;
left: 26px;
height: 14px;
width: 60px;
color: #fff;
background-color: orange!important;
position: absolute;
border-radius: 4px 4px 0 0;
transition: box-shadow .2s;
}
article.sticky:before {
content: "";
top: 0;
left: 26px;
height: 14px;
width: 100px;
background-color: #fff;
position: absolute;
z-index: 100;
transform: translateZ(100px);
}
article:hover.sticky:after {
box-shadow: 2px 2px 6px #bbb;
}
検証をして、先頭固定表示の投稿の中に「sticky」というクラス名を見つけたので、それを利用しています。
「new」のコード
/* 新着投稿 */
article.new:after {
content: "new";
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
top: -14px;
left: 26px;
height: 14px;
width: 60px;
color: #fff;
background-color: #f33;
position: absolute;
border-radius: 4px 4px 0 0;
transition: box-shadow .2s;
}
article.new:before {
content: "";
top: 0;
left: 26px;
height: 14px;
width: 100px;
background-color: #fff;
position: absolute;
z-index: 100;
transform: translateZ(100px)
}
article:hover.new:after {
box-shadow: 2px 2px 6px #bbb;
}
解説
「:before」「:after」を使うにはコツがあります。
- 擬似要素を追加する要素を「position: relative;」にすること
- 擬似要素には中身がなくとも「content: “”;」を設定すること
- 擬似要素は「position: absolute;」にすること
表示されないなってときは上記を確認してほしいです。
:afterのコード解説
- content: “new”;
↑テキスト(必須) - display: flex;
- align-items: center;
- justify-content: center;
↑flexにして、文字の上下左右を中央揃えにしています。 - font-weight: bold;
- font-size: 12px;
↑テキストの設定 - top: -14px;
- left: 26px;
↑位置調整 - height: 14px;
- width: 60px;
↑サイズ調整 - color: #fff;
- background-color: #f33;
↑色 - position: absolute;
↑絶対位置表示(必須) - border-radius: 4px 4px 0 0;
↑上部分のみ丸くしている - transition: box-shadow .2s;
↑CSSアニメーションの設定
「:after」にはテキストを表示しています。
擬似要素の:hoverについて
ちなみに「:hover」とかは擬似クラスって名前らしいです。
擬似要素の擬似クラスは、擬似要素を設定した元の要素に付けます。
article:hover.new:after {
/*articleをhoverしたとき.newの:afterを変更する*/
box-shadow: 2px 2px 6px #bbb;
}
hoverされたときに擬似要素にも影がつくように設定しました。
:beforeのコード解説
同じ要素に同じ擬似要素を何個も付けたりはできないようなので、「:before」にホバーによってできた影を隠すコードを書きました。
- content: “”;
↑テキスト(必須) - top: 0;
- left: 26px;
↑位置調整 - height: 14px;
- width: 100px;
↑サイズ調整 - background-color: #fff;
↑色 - position: absolute;
↑絶対位置表示(必須) - z-index: 100;
- transform: translateZ(100px);
↑表示レイヤーを上に設定する
これで「:after」の側に白い空間が表示され、ホバー時の影を隠すことができます。