8

重複の可能性：
「text-decoration」と「：after」疑似要素
「text-decoration」と「：after」疑似要素、再検討

タグを使用してナビゲーションリンクを作成してい<a>ます以下はhtmlです

<div class="nav_container">
    <a class="panel" href="demolink">menu1</a>
    <a class="panel" href="demolink">menu2</a>
    <a class="panel" href="demolink">menu3</a>
</div>

そして、:aftercssプロパティを適用して、仕切りのパイプラインを配置します

.panel:after{
    content:"|";
    margin-left: 4px;
    margin-right: 4px;
}
.panel:last-child:after{
    content:"";
}

メニューが選択されたときに下線を付けたいので、selectedというクラスを適用しています

.panel.selected {
    text-decoratoion:underline;
}

しかし、問題はメニュー「|」の後のパイプラインです アンダースコアも付いているので削除したいと思います。.panle:after私は次のようにCSSを変更しようとしました、

.panel:after{
    content:"|";
    margin-left: 4px;
    margin-right: 4px;
    text-decoration:none;
}

しかし、それでも下線はそこにあります。

どんな提案でも、ありがとう。

4

4 に答える 4

23

これを試してください：

.panel:after {
    display:inline-block;
}

または、以下を使用します。

.panel {
  display: inline-block;
  vertical-align: top;
  position: relative;
  color: black;
  font-size: 14px;
  font-weight: bold;
  margin: 0 5px;
}

.panel:after {
  content: '';
  border-left: solid 2px red;
  left: -10px;
  top: 2px;
  height: 10px;
  position: absolute;
}

.panel:first-child:after {
  display: none;
}

.panel:hover {
  text-decoration: none;
}
<div class="nav_container">
  <a class="panel" href="demolink">menu1</a>
  <a class="panel" href="demolink">menu2</a>
  <a class="panel" href="demolink">menu3</a>
</div>

于 2012-11-01T06:29:54.047 に答える
5

あなたはあなたの質問にもお互いの方法を使うことができます：-デモ

私は最小化されたコードで試しました：-

HTML

<div class="nav_container">
    <a href="demolink">menu1</a>
    <a href="demolink">menu2</a>
    <a href="demolink">menu3</a>
</div>

CSS

.nav_container a {
color:red;
display:inline-block;
}
.nav_container a + a{
color:red;
border-left:1px solid red;
padding-left:7px;
line-height:12px;
}
于 2012-11-01T09:15:32.613 に答える
1

.panel.selected {}私はあなたの部分が何をしているのか正確にはわかりません。ただし、これを使用すると、フォーカスされているときにリンクに下線を付けることができます。

.panel:focus {text-decoration:underline;}

そして、このようにリンクとパイプ（|）から下線を削除することができます。

.panel:link {text-decoration:none;}

上記の2つをページに追加して、確認してください。

于 2012-11-01T07:02:08.343 に答える
-1

要件に合わせたシンプルなメニュー。

HTML：

<div class="menu">
<ul>
<li class="last-menu"><a href="#">menu1</a></li>
<li class="last-menu"><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>

CSS：

.menu{
    width:100%;
}

.menu ul{
    list-style:none;
}

.menu li{
    float:left;

}

.last-menu{
    border-right:1px solid #000;
}
于 2012-11-02T14:08:05.840 に答える