web-dev-qa-db-ja.com

CSS：after擬似要素に要素の外側にコンテンツを追加させることはできますか？

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

home " about us " history "このページ

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

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

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

ホーム"私たちについて"歴史" このページ

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

htmlcsscss-selectorspseudo-element
38
Dylan Beattie

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

#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>
31
kapa

spec は言う：

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

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

以下は、両方の疑似要素を持つそのようなリンクのDOM要素のツリーを視覚的に表したものです。

a
  a:before
  content
  a:after

この動作の回避策の1つは、各リンクをspanでラップし、スタイルをnav#breadcrumb-trail span:afterに適用することですが、これは不必要なマークアップになります。

33
BoltClock

CSSの柔軟性と awesomeness を考えると、かなり実行可能に見えます。現在のChrome、FF、およびIEでこれを試してみました。追加のマークアップを追加する必要なく、期待どおりに仕事をします：

#box {
  width: 100px;
  height: 100px;
  background: #eee;
  position: relative;
}

#box:after {
  content: '...appended text outside box';
  position: absolute;
  margin-left: 100%;
  left: 0;
  width: 200px;
}
<div id="box">
  Some Box
</div>

小さな警告：絶対に配置された `要素はボックスの寸法に含まれているため、浮動要素またはその隣に配置された要素は、疑似要素のコンテンツの幅を動的に考慮することができません。

3
Philzen