From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_doublecolon_after/index.html | 177 +++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/ja/web/css/_doublecolon_after/index.html (limited to 'files/ja/web/css/_doublecolon_after/index.html') diff --git a/files/ja/web/css/_doublecolon_after/index.html b/files/ja/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..a7ba688a7b --- /dev/null +++ b/files/ja/web/css/_doublecolon_after/index.html @@ -0,0 +1,177 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - ウェブ + - リファレンス + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

+ +
/* リンクの後に矢印を追加 */
+a::after {
+  content: "→";
+}
+ +
+

メモ: ::before 及び ::after によって作成される疑似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

+
+ +

構文

+ +
{{csssyntax}}
+ +
+

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::after の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :after も使用できます。

+
+ +

例

+ +

シンプルな使い方

+ +

2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。

+ +

HTML

+ +
<p class="boring-text">古くつまらないテキストです。</p>
+<p>つまらなくも楽しくもないふつうのテキストです。</p>
+<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: " <- 楽しい！";
+  color: green;
+}
+
+.boring-text::after {
+  content: " <- ツマラナイ！";
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_usage', 500, 150)}}

+ +

装飾の例

+ +

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

+ +

HTML

+ +
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "かわいいオレンジのボックスです。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

結果

+ +

{{EmbedLiveSample('Decorative_example', 450, 20)}}

+ +

ツールチップ

+ +

この例は、 ::after を CSS の attr() 関数と data-descr カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

+ +

HTML

+ +
<p>Here we have some
+  <span data-descr="collection of words and punctuation">text</span> with a few
+  <span data-descr="small popups that appear when hovering">tooltips</span>.
+</p>
+
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

結果

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}擬似要素で定義されたプロパティのトランジションを許可
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.after")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf