今回のゴール
今回の実装のゴールは以下のように右端に矢印アイコンを付加したリストを作成することを目指します。
この際、改行などによってリスト内のコンテンツの高さが変わってもアイコンがリストの縦中央に綺麗に揃う実装を実現させます。
CSSの疑似要素afterとは
CSSの疑似要素としてよく使うものにbeforeやafterがあります。beforeは要素の前に何らかのコンテンツを付加するもの、afterは要素の後に何らかのコンテンツを付加するものです。
こう聞くと疑似要素など使わずに要素内に書けばいいんじゃないかと思われますが、要素内のコンテンツに依存しないようにコンテンツを追加したいケースというのがあるのです。
今回のようにリストの右端に矢印アイコンを追加したいといったケースがそうです。この矢印アイコンを要素内に書こうとすれば、テキストに続く形で矢印をつけるほかなくなりますがこれでは目的のデザインを実現することはできません。
こういったときに疑似要素というのが役に立ってくるわけです。
疑似要素の書き方
疑似要素の書き方はこんな感じです。
.menu-list:after {
content:”〉”;
position:absolute;
top:50%;
right:10px;
}
contentという属性にテキストを設定することからわかるように、基本的にはある要素に、その要素にあまり依存しない形で何らかのコンテンツを付加するような使い方になります。
実装サンプル
では今回のコードを記述します。
CSS部
.menu-list {
}
.menu-list li {
position: relative;
padding:10px;
border:1px solid #ddd;
margin:1px;
background:#f8f8f8;
}
.menu-list li:after {
content: "〉";
color:#ddd;
position: absolute;
top: 50%;
right: 10px;
margin-top: -12px;
}
HTML部
<ul class="menu-list"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul>
まとめ
いかがでしたか？こういったコードはウェブデザインで頻繁に使うことになりますので是非覚えておいて頂くとよろしいかと思います。