【コピペで使える】CSSの疑似要素（after）を使って縦中央揃えのアイコンを付加したリストを作る方法
たーさん今回のゴール
今回の実装のゴールは以下のように右端に矢印アイコンを付加したリストを作成することを目指します。
この際、改行などによってリスト内のコンテンツの高さが変わってもアイコンがリストの縦中央に綺麗に揃う実装を実現させます。
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>
まとめ
いかがでしたか？こういったコードはウェブデザインで頻繁に使うことになりますので是非覚えておいて頂くとよろしいかと思います。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
