cssのみでスマホサイトのリンク矢印を作成する方法

スマートフォンサイトでよくあるリンク矢印をcssだけで作成する方法のメモ。

cssコード

a{
display: block;
position: relative;
}

a:after {
display: block;
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
margin-top: -4px;
border-top: solid 2px #7f7f7f;
border-right: solid 2px #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}

矢印を設置したいリンクに:after擬似要素で上と右にボーダーをつけた要素を設置し、transformで回転させて設置しています。


コメントを残す

メールアドレスが公開されることはありません。