縦線の上と下の部分を削りたい

Question

以下のような形で書いた場合にaaaの右側、縦線の上の部分と下の部分を削りたい（線の長さを変えたい）のですが、
どのようにすれば実現できるでしょうか？beforeやafterを使いますか。

<ul style="list-style:none;"> <li style="float:left;width:50px;border-right:1px solid;">aaa</li> <li style="float:left;width:50px;">bbb</li> </ul>

Answer 1

素直にborderを使うのは無理だと思います。
ikki57さんの言うように画像で用意するか、或いはlinear-gradientを使うというのはどうでしょう。

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

ul {
  display: block;
  padding-right: 0;
  padding-left: 0;
}

li {
  list-style: none;
  display: block;
  float: left;
}

/* li要素の後に罫線を引く */
li::after {
  /* 罫線の幅 */
  width: 1px;
  /*
   * 上から30%と、下から30%(上から数えて70%以降)を透明に
   * 上から30%〜下から30%までを黒に
   */
  background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, black 30%, black 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%);
  /* 罫線の左右の余白 */
  margin-left: 0.5em;
  margin-right: 0.5em;

  content: "x";
  color: rgba(0,0,0,0);
  display: inline-block;
}

/* 最後のli要素の後には罫線を引かない */
li:last-child::after {
  background-image: none;
  content: none;
}

JSFiddleでサンプルを用意してみました。

以下のwebブラウザで表示できる事を確認しました。

• Firefox 42.0
• Chrome 47.0.2526.80
• Edge 25.10586.0.0
• Internet Explorer 11.0.10586.0

難点が在るとしたら、linear-gradientは2015年12月現在まだW3C勧告になっていないという事でしょうか……

Answer 2

beforeやafterを使いますか。

それでも実現可能かと思います。

もしくはcssで背景画像として、borderとして見せるという手もあるかと思います。
（before, afterの擬似要素の方が楽かと思いますが）