CSSだけで矢印をつくる方法

公開日: : CSS

参考サイトのままです。
メモなので、簡単に。

【HTML】

<ul>
	<li><a href="#">List 01</a></li>
	<li><a href="#">List 02</a></li>
	<li><a href="#">List 03</a></li>
	<li><a href="#">List 04</a></li>
	<li><a href="#">List 05</a></li>
</ul>


【CSS】

ul li a {
	position: relative;
	display: block;
	padding: 10px 25px 10px 10px;
	border-bottom: 1px solid #ccc;
}

ul li a::after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1px solid #888;
	border-right: 1px solid #888;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}



rotate(45deg)の数字の部分で回転角度を変更します。

NxWorldさん、ありがとうございます。

ad

関連記事

Web

Adobe Typekitで、一瞬違うフォントが表示される時の対処法

最近、Adobe Typekitを使用し始めたのですが ページを表示させた際、 一瞬です

記事を読む

CSS

蛍光ペンで線を引いたようなラインをCSSで。

CSSでちょっとだけテキストにオシャレな小技を。 CSSだけで少し手書き感を出した

記事を読む

CSS

Google Map(グーグルマップ)をレスポンシブ対応に。

Google Mapを埋め込むときにレスポンシブ対応させる方法。 そのままコピペすれば

記事を読む

CSS

背景だけを透過させるCSSの書き方

タイトルの通り、背景だけを透過させるCSSの書き方。 簡単にいうと、 背景の

記事を読む

CSS

文字の強調『傍点』をCSSで表現するには

文字の上に点々をつけて、強調させる傍点をCSSで表現する方法のメモ。

記事を読む

CSS

CSSでナンバリングする方法(CSSでナンバーを付ける)

ランキングにCSSでランキングの数字を付けたくて、方法を探してみました。 このサイトの

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑