CSS3 Pre-Reference



::alternate

代替要素

試す

コード

#sampleDisp p {
  content: "div";
  color: green;
}
#sampleDisp p::alternate {
  content: "alternate1";
  move-to: example1;
}
#sampleDisp p::alternate::before {
  content: "before1";
}
#sampleDisp p::after {
  content: "after1" pending(example1);
  color: navy;
}
#sampleDisp p::after::alternate {
  content: "alternate2";
  move-to: example2;
}
#sampleDisp p::after(2) {
  content: "after2" pending(example2);
  color: purple;
}

サンプル

すべての段落が
div after1 before1 alternate1 after2 alternate2
のような表示になります。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。

青文字その後(けむり)したから火がある。ただその日がよかろう度毎まった。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

レベル 3
参考文献 Selectors Level 3#4.4. Inserting new content later in the document tree with '::alternate'

解説

要素の指定箇所に任意のコンテンツを追加します。

任意のコンテンツとは、文字、画像、どこかの要素の属性、など。何を追加するかは”content”プロパティで指定します。詳細は”content”プロパティを参照ください。

どこに追加するかは、"move-to"プロパティで指定します。

トラックバック

投稿されたコメント