CSSで、どうすれば次のようなことができますか？
---Item---
ダッシュが線のように接続されていますか？
私は考えました：
border-bottom: 3px solid #000;
しかし、行を上に移動することはできません。さらに、行はテキストの後ろにあり、テキストを囲んでいません。
私のHTML
<ul>
<li class="sub-menu-item" ><a href="#">FACULTY&STAFF</a></li>
</ul>
（可能であれば、HTMLに触れないようにします）
上記のすべてはcssを介して可能ですか、それとも画像を使用する必要がありますか？
私はie8以上（そしてもちろんすべての新しいブラウザ）を目指しています
スタートは次のとおりです。
.sub-menu-item
{
border-bottom:1px solid black;
height:0.6em;
width:200px;
text-align:center;
margin-bottom:1em;
}
.sub-menu-item > a
{
text-decoration:none;
background:white;
}
http://jsfiddle.net/NpP5F/3/ （複数のアイテムで機能するように更新）
Firefox、IE、Chromeで動作することがテストされています。ここで、これはフィドルで単独で機能することを覚えておいてください。他のhtml要素やスタイルなどで機能させるには、おそらく多少の調整が必要になります。とにかく概念実証。それは「できる」のです。
border-topとborder-bottom、line-height：0で、背景色が定義されたスパンを内部に持つdivを作成できます。
<div class="test">
<span>BLA BLA BLA </span>
</div>
そしてCSS：
.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }
.test span {
background-color: #BABABA;
padding: 0 10px; }
理論的には、を使用して<hr/>、その長さを設定し、強制的にインラインで表示することができます。または、エンコーディングでサポートされている場合は、特殊なUnicode文字を使用してください。
これを試して。:)画像を使用します。これは、ダッシュを好きなようにスタイル設定できるためプラスであり、奇妙な余白や残りのレイアウトを台無しにする可能性のあるものを処理しません。
li.sub-menu-item
{
background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}
li.sub-menu-item a
{
background-color: #FFF;
padding: 0 10px;
margin-left: 200px /* So you can see the left side of the line too */
}
コードを変更せずに：
ul li{
position: relative;
border-bottom: 1px solid #000;
}
ul li a{
position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}