【第四回実験】疑似クラスを使ってメニューリストに区切り線を入れる方法【CSS】

実験動機

横メニューにCSSの疑似クラスを利用して斜線を入れたいなぁと思い実験してみました。

装飾はなし。

美しさはシンプルに宿る事が多いので、シンプルイズベストな感じで作りたい。

参考サイトさま

▼1.[CSS]擬似クラス４つ「:first-child」「:last-child」「:first-of-type」「:last-of-type」　- :last-child部分使用
https://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/

▼2.【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ – 疑似要素:before :after部分使用
https://www.asobou.co.jp/blog/web/css2#A_first-letter

▼3.【CSS】content内で改行やスペースを入力する方法 – white-space: pre-wrap;使用
https://saruwakakun.com/html-css/reference/css-break

▼4.CSS: 擬似クラス before, after の解除方法 – content: none;使用
https://www.sirochro.com/note/css-remove-before-pseud-class/

▼5.[CSS] 擬似クラスって複数繋げられるの知ってました? – 2つの擬似属性を適用させる方法使用
https://yossense.com/css-last-child-after/ 

実装イメージ

リストはカテゴリーの表示を行うためにやりたい。

カテゴリー　/ カテゴリー１　/　カテゴリー２

上記のような感じで並んでほしい。最初のカテゴリー　/までは直書きしてるのでカテゴリー１以降の斜線を表示させたい。

実装内容

以下のような感じで実装しました。

実装パターン1

CSS
.header_category_menu li:after {
white-space: pre-wrap;
content: ” / “;
color: # ff0000;
}

.header_category_menu li:last-child:after{
content: none;
}

See the Pen
疑似クラスを使ってメニューリストに区切り線を入れる方法 by 蒼 (@noborder01)
on CodePen.

でもこれだとなんか…直書きしているのと綺麗に並ばない…！美しくない！
ので、疑似クラスをaftarからbeforeに変えてみました。

実装パターン2

CSS
.header_category_menu li:before {
white-space: pre-wrap;
content: ” / “;
color: # ff0000;
}

See the Pen
疑似クラスを使ってメニューリストに区切り線を入れる方法 by 蒼 (@noborder01)
on CodePen.

これなら要素の直前にコンテンツを追加なので、
afterで指定した最期の斜線を消す作業を入れなくてOK！
そして直書きの斜線も消してOK!
無事実装完了しました(*´꒳`*)

今日の気づき

最初疑似要素afterで作っていたので、最期の要素を削除する必要が出て悩みました。

ですが、参考サイトヨッ！センスさんの記事でlast-childとafterを繋げて使える事を知れて解決できてよかったです。ですが見栄えの点からbeforeでやってみてもうまく実装できました。

2種類のやり方を知れたので、例えばどちらかの疑似要素を使用している場合に対応できそうだなと思いました。
（例:疑似要素beforeが画像アイコン指定してある場合はafterで実装する等)

記事内にあるものだけを利用するのでなく組み合わせを試してみること、
見栄えがいい方法を考えることは色んな実装パターンを模索できるので大切だなぁと思いました。個人的にはソースを初CODEPEN表示できて嬉しい。

今回も楽しかったなぁ…次の実験をお楽しみに(*´꒳`*)/