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で回転させて設置しています。

Tweet

関連記事:

cssのpositionでdivの範囲外を指定した場合に見切れて表示されない問題の修正点 iphoneのブラウザsafariでの表示の崩れを修正する方法 wordpressにいいねボタン設置方法 猿でも簡単に実装できるdivの開閉Jquery【slideToggle】 clearfixを使用しているとwordpressの下部に空白ができるのを修正する方法 wordpressのメニューで外部リンクを新しいウィンドウで開く　target=”_blank”を設定する方法