2021/12/21 時点の英語版に同期

1 files changed, 89 insertions, 109 deletions

diff --git a/files/ja/web/css/_doublecolon_after/index.md b/files/ja/web/css/_doublecolon_after/index.md
index 74e3639749..e892fa478a 100644
--- a/files/ja/web/css/_doublecolon_after/index.md
+++ b/files/ja/web/css/_doublecolon_after/index.md
@@ -1,74 +1,81 @@
 ---
 title: '::after (:after)'
-slug: 'Web/CSS/::after'
+slug: Web/CSS/::after
 tags:
   - CSS
-  - ウェブ
-  - リファレンス
   - レイアウト
-  - 疑似要素
-translation_of: 'Web/CSS/::after'
+  - 擬似要素
+  - リファレンス
+  - セレクター
+  - ウェブ
+browser-compat: css.selectors.after
+translation_of: Web/CSS/::after
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary">CSS において <strong><code>::after</code></strong> は、選択した要素の最後の子要素として<a href="/ja/docs/CSS/Pseudo-elements">擬似要素</a>を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。</span>この要素は既定でインラインです。</p>
+CSS において **`::after`** は、選択した要素の最後の子要素として[擬似要素](/ja/docs/CSS/Pseudo-elements)を生成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。
 
-<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>
+```css
+/* リンクの後に矢印を追加 */
+a::after {
+  content: "→";
+}
+```
 
-<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>
+> **Note:** `::before` および `::after` によって作成される擬似要素は[要素の整形ボックスに含まれるため](https://www.w3.org/TR/CSS2/generate.html#before-after-content)、 {{htmlelement("img")}} や {{htmlelement("br")}} のような[置換要素](/ja/docs/Web/CSS/Replaced_element)には適用されません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-{{csssyntax}}
+{{CSSSyntax}}
 
-<div class="note">
-<p><strong>メモ:</strong> CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p>
-</div>
+> **Note:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Simple_usage" name="Simple_usage">シンプルな使い方</h3>
+### シンプルな使い方
 
-<p>2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。</p>
+2 つのクラスを作成しましょう。 1 つはつまらない段落で 1 つは楽しい段落です。これらのクラスを使用して、段落の最後に擬似要素を追加することができます。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<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>
+```html
+<p class="boring-text">古くつまらないテキストです。</p>
+<p>つまらなくも楽しくもないふつうのテキストです。</p>
+<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exciting-text::after {
-  content: " &lt;- 楽しい！";
+```css
+.exciting-text::after {
+  content: " <- 楽しい！";
   color: green;
 }
 
 .boring-text::after {
-  content: " &lt;- ツマラナイ！";
+  content: " <- ツマラナイ！";
   color: red;
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample('Simple_usage', 500, 150)}}</p>
+{{EmbedLiveSample('Simple_usage', 500, 150)}}
 
-<h3 id="Decorative_example" name="Decorative_example">装飾の例</h3>
+### 装飾の例
 
-<p>{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。</p>
+{{CSSxRef("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;span class="ribbon"&gt;このテキストの後のオレンジのボックスを見てください。&lt;/span&gt;</pre>
+```html
+<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.ribbon {
+```css
+.ribbon {
   background-color: #5BC8F7;
 }
 
@@ -77,34 +84,40 @@ translation_of: 'Web/CSS/::after'
   background-color: #FFBA10;
   border-color: black;
   border-style: dotted;
-}</pre>
+}
+```
+
+#### 結果
 
-<h4 id="Result_2" name="Result_2">結果</h4>
+{{EmbedLiveSample('Decorative_example', 450, 20)}}
 
-<p>{{EmbedLiveSample('Decorative_example', 450, 20)}}</p>
+### ツールチップ
 
-<h3 id="Tooltips" name="Tooltips">ツールチップ</h3>
+この例は、 `::after` を CSS の [`attr()`](/ja/docs/Web/CSS/attr) 関数と `data-descr` [カスタムデータ属性](/ja/docs/Web/HTML/Global_attributes/data-*)との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。
 
-<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>
+また、このテクニックを使ってキーボードユーザーに対応することもできます。 `tabindex` に `0` を追加して、それぞれの `span` をキーボードフォーカス可能にし、CSS の `:focus` セレクターを使用することでキーボードフォーカスを可能にします。これは `::before` と `::after` がいかに柔軟であるかを示しています。しかし、最もアクセスしやすいようにするには、他の方法（例えば [details および summary](/ja/docs/Web/HTML/Element/details) 要素で作成した詳細折りたたみウィジェットがより適していると思われます。
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<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>
+```html
+<p>Here we have some
+  <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few
+  <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
+</p>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">span[data-descr] {
+```css
+span[data-descr] {
   position: relative;
   text-decoration: underline;
   color: #00F;
   cursor: help;
 }
 
-span[data-descr]:hover::after {
+span[data-descr]:hover::after,
+span[data-descr]:focus::after {
   content: attr(data-descr);
   position: absolute;
   left: 0;
@@ -117,59 +130,26 @@ span[data-descr]:hover::after {
   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>{{Compat("css.selectors.after")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Tooltips', 450, 120)}}
+
+## アクセシビリティの考慮
+
+`::after` 擬似要素を使用してコンテンツを追加することは、画面リーダーからアクセスできなくなる可能性があるため推奨されません。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef("::before")}}
+- {{CSSxRef("content")}}