リストにcssで矢印をつけてみよう

リストにcssで矢印をつけていこうと思います。
矢印の構造を考えますと、右を向いている三角形のような部分とその接点に棒がついているような構造になっていますね。
まず、三角形のような部分について考えてみようと思います。
三角形のような部分を作るためには、まずリストの前に四角形を作ります。
htmlの構造としては、こちらの構造を使用します。

<ul class="arrows">
<li>ホームページを育てる企業</li>
<li>株式会社ウィコネット</li>
<li>福井をwebの力で活性化させます。</li>
</ul>

まず、cssでリストの前に四角形を作ってみようと思います。

.arrows li{
 position:relative;
 padding-left:10px;
list-style:none;
}
.arrows li:before{
 content:'';
 display:inline-block;
 position:absolute;
 left:0px;
 top:12px;
 width:5px;
 height:5px;
 border-bottom:1px solid #888;
 border-right:1px solid #888;
}

cssを上記のように作ります。liを絶対位置として、beforeをブロックにします。
そしてbeforeで生成した四角形の右と下にborderをつけます。
そうすると次のような状態になります。

この状態では、まだ矢印の形には程遠いですね。
次にこちらのbeforeの要素を４５度回転させます。
つまりbeforeのcssは次のようになります。

.arrows li:before{
 content:'';
 display:inline-block;
 position:absolute;
 left:0px;
 top:12px;
 width:5px;
 height:5px;
 border-bottom:1px solid #888;
 border-right:1px solid #888;
 transform:rotateZ(-45deg);
}

４５度回転させることで先ほど作った四角形が次のようになります。
考え方としては四角形を45度回転させてひし形のようにして右方向だけにborderをつけるといったものです。

少し、矢印に近づきましたね。我々がよく知っている矢印にするにはあと右を向いている四角形の中心に棒が必要ですね。
次にbeforeの要素で、三角形を作ってしまったので、afterの要素を使って棒の部分を作っていきましょう。
とりあえず、先ほどのliとli:beforeの要素はそのままにしてafterの要素で棒を作ります。
widthは１０pxくらいにしてheightを１pxにして背景に色をつけることで棒を作ります。

.arrows li:after{
 content:'';
 display:inline-block;
 position:absolute;
 left:0px;
 top:0px;
 width:10px;
 height:1px;
 background:#888;
}

上記のように棒が出てきましたね。
ただ位置がおかしいので、まず三角形と文字の部分をずらして棒の縦方向の位置を揃えましょう。

.arrows li{
 position:relative;
 padding-left:17px;
list-style:none;
}
.arrows li:before{
 content:'';
 display:inline-block;
 position:absolute;
 left:4px;
top:12px;
width:5px;
height:5px;
border-bottom:1px solid #888;
border-right:1px solid #888;
transform:rotateZ(-45deg);
}
.arrows li:after{
 content:'';
 position:absolute;
 display:inline-block;
 left:0;
 top:14px;
 width:10px;
 height:1px;
 background:#888;
}

liのpaddingをずらし、li:beforeのleftを調整して、afterのtopを調整すると上記のように矢印になりましたね。