initial commit

1 files changed, 177 insertions, 0 deletions

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'
+---
+<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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>