文字と文字の間にラインを挿入

Question

画像のように文字よ文字の間にラインを入れたくて、自分なりにつくて見たのですが上手くできませんでした。

.alt1{
	border-right-width:1px;
	border-right-color:#A49D9D;
}

alt1を作って

<li class="item alt1"> 
   <a href="../index.html" target="_top" >ホーム</a>
</li>

このように適応させたのですが、表示されません。
アドバイスください。

Answer 1

隣接セレクタとborder-leftを併用すると、間に線が引けます。

<li class="sample">text</li>
<li class="sample">text</li>
<li class="sample">text</li>

.sample + .sample {    
  border-left: solid 1px #A49D9D;
}

Answer 2

.alt1{
    border-right-width:1px;
    border-right-color:#A49D9D;
    border-right-style: solid; /*追加*/
}

borderは、太さと色と種類の情報が揃わないと表示されません。
最初に書いたものは「種類」のプロパティが足りなかったですね。

ちなみに太さと色と種類を全部まとめて1行で書くとこうなります。

.alt1 {
  /*ショートハンドでの書き方*/
  border-right: 1px #A49D9D solid;
}

複数のプロパティをまとめて1行で書く方式のことを「ショートハンド」と言います。

Comments

[ryo-dev]

素早い回答ありがとうございました。
線の種類を書いてなかったのが原因でしたか。

[aKusano]

ですね。