39

隣接するリンク間の HTML エンティティを使用して、リンクのパンくずリストをフォーマットしたい»ので、次のようになります。

ホーム»私たちについて»沿革» このページ

CSS にルールを追加しました。

nav#breadcrumb-trail a:after {
    content: " » ";
}

しかし、これはリンクの外側ではなく、リンクの内側にエンティティを追加しています-つまり、私はこれを取得しています:

ホーム » 私たちについて »沿革 »このページ

CSS:after疑似要素の動作を誤解していますか? ドキュメントは、要素のコンテナの内部に追加するのではなく、指定された要素の後に指定されたコンテンツを追加することを暗示しているようです。何か案は？

4

3 に答える 3

34

仕様によると：

名前が示すように、：beforeおよび：after疑似要素は、要素のドキュメントツリーコンテンツの前後のコンテンツの場所を指定します。

この文の最後にあるキーフレーズに注意してください。これは、内部コンテンツ（または内部テキスト）を指します。したがって、疑似要素は、指定された要素のコンテンツ内の末尾の先頭に挿入されます。したがって、右の二重引用符は、ハイパーリンクの後にではなく、ハイパーリンクのテキストの後に挿入されます。

これは、両方の疑似要素を持つ1つのそのようなリンクのDOM要素のツリーの視覚的表現です。

a
  a:before
  content
  a:after

この動作の回避策の1つは、各リンクをラップしてspanからスタイルをに適用することnav#breadcrumb-trail span:afterだと思いますが、これは不要なマークアップになります...とにかく一撃の価値があります。

于 2011-03-19T14:57:05.617 に答える
33

通常、これらのメニューは順序付きリストとしてコーディングするので、代わりに次のようにするのが理にかなっています。

#breadcrumb-trail ol { 
    list-style: none; 
    margin: 0;
    padding: 0; 
}

#breadcrumb-trail li { 
    display: inline; 
}

#breadcrumb-trail li:after { 
    content: ' » '; 
}

#breadcrumb-trail li:last-child:after { 
    content: none; 
}
<nav id="breadcrumb-trail">
    <h1>My Amazing Breadcrumb Menu</h1>
    <ol>
        <li><a href="">about</a></li>
        <li><a href="">fos</a></li>
    </ol>
</nav>

于 2011-03-19T15:25:34.627 に答える