CSS で矢印を作る方法

CSS で矢印を作る方法を紹介します。
例えば、画像を使わずに CSS だけで矢印を実装したい場合に便利な方法です。

文字列の左横に矢印を表示

文字列の左横に CSS を使って矢印を表示する方法を紹介します。

左横に右向き矢印を表示

ベースの HTML は次の通りです。


<span class="arrow-right">左横に右向き矢印を表示</span>

CSS は次の通りです。


.arrow-right {
position: relative;
padding-left: 14px;
}
/* 右向き矢印 */
.arrow-right::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 6px;
margin: -3px 0px 0px 0px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 上向き矢印 */
.arrow-right::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 右向き矢印 */
.arrow-right::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 下向き矢印 */
.arrow-right::before {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/* 左向き矢印 */
.arrow-right::before {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}

文字サイズが 12px から 14px の間を想定しているので、位置が合わない場合は適宜調整してください。
文字列の右側に矢印を移動したい場合は left: 0;right: 0; などにして調整してください。

まとめ

CSS で矢印を作る方法を紹介しました。

スポンサーリンク

私が続けて読みたい関連記事