---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
  - CSS
  - ウェブ
  - リファレンス
  - レイアウト
  - 疑似要素
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">CSS において <strong><code>::after</code></strong> は、選択した要素の最後の子要素として<a href="/ja/docs/CSS/Pseudo-elements">擬似要素</a>を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。</span>この要素は既定でインラインです。</p>

<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* リンクの後に矢印を追加 */</span>
<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
  <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
<span class="punctuation token">}</span></code></pre>

<div class="note">
<p><strong>メモ:</strong> <code>::before</code> 及び <code>::after</code> によって作成される疑似要素は<a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">要素の整形ボックスに含まれるため</a>、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></em>には適用されません。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

{{csssyntax}}

<div class="note">
<p><strong>メモ:</strong> CSS3 では<a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p>
</div>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Simple_usage" name="Simple_usage">シンプルな使い方</h3>

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

<h4 id="HTML">HTML</h4>

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

<h4 id="CSS">CSS</h4>

<pre class="brush: css">.exciting-text::after {
  content: " &lt;- 楽しい！";
  color: green;
}

.boring-text::after {
  content: " &lt;- ツマラナイ！";
  color: red;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Simple_usage', 500, 150)}}</p>

<h3 id="Decorative_example" name="Decorative_example">装飾の例</h3>

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

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;span class="ribbon"&gt;このテキストの後のオレンジのボックスを見てください。&lt;/span&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.ribbon {
  background-color: #5BC8F7;
}

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

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample('Decorative_example', 450, 20)}}</p>

<h3 id="Tooltips" name="Tooltips">ツールチップ</h3>

<p>この例は、 <code>::after</code> を CSS の <a href="/ja/docs/Web/CSS/attr"><code>attr()</code></a> 関数と <code>data-descr</code> <a href="/ja/docs/Web/HTML/Global_attributes/data-*">カスタムデータ属性</a>との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;Here we have some
  &lt;span data-descr="collection of words and punctuation"&gt;text&lt;/span&gt; with a few
  &lt;span data-descr="small popups that appear when hovering"&gt;tooltips&lt;/span&gt;.
&lt;/p&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Result_3" name="Result_3">結果</h4>

<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("css.selectors.after")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
</ul>