From 2a4c8d3056f4d6e354e8aac3ab529b59805d256a Mon Sep 17 00:00:00 2001
From: Map1en_ <maplenagisa@gmail.com>
Date: Wed, 26 Jan 2022 14:33:12 +0800
Subject: fix(doublecolon-after): sample code of tooltips (#3746)

---
 files/zh-cn/web/css/_doublecolon_after/index.html | 52 +++++++++++------------
 1 file changed, 26 insertions(+), 26 deletions(-)

(limited to 'files/zh-cn')

diff --git a/files/zh-cn/web/css/_doublecolon_after/index.html b/files/zh-cn/web/css/_doublecolon_after/index.html
index b4dc41dbbf..34259be206 100644
--- a/files/zh-cn/web/css/_doublecolon_after/index.html
+++ b/files/zh-cn/web/css/_doublecolon_after/index.html
@@ -48,13 +48,13 @@ element::after { <em>style properties</em> }  /* CSS3 语法 */</pre>
 }
 
 .boring-text::after {
-   content:    "&lt;- 无聊!";
-   color:      red;
+  content: "&lt;- 无聊!";
+  color: red;
 }</pre>
 
 <h4 id="输出" style="line-height: 18px;">输出</h4>
 
-<p>{{ EmbedLiveSample('Simple_usage', 500, 150) }}</p>
+<p>{{ EmbedLiveSample('Simple_usage', 500, 170) }}</p>
 
 <h3 id="装饰用法">装饰用法</h3>
 
@@ -63,14 +63,14 @@ element::after { <em>style properties</em> }  /* CSS3 语法 */</pre>
 <pre class="brush: html">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>
 
 <pre class="brush: css">.ribbon {
-  background-color: #5BC8F7;
+ background-color: #5BC8F7;
 }
 
 .ribbon::after {
-  content: "Look at this orange box.";
-  background-color: #FFBA10;
-  border-color: black;
-  border-style: dotted;
+ content: "Look at this orange box.";
+ background-color: #FFBA10;
+ border-color: black;
+ border-style: dotted;
 }</pre>
 
 <h4 id="输出_2" style="line-height: 18px;">输出</h4>
@@ -84,35 +84,35 @@ element::after { <em>style properties</em> }  /* CSS3 语法 */</pre>
 <pre class="brush: html">&lt;p&gt;这是上面代码的实现&lt;br /&gt;
   我们有一些 &lt;span data-descr="collection of words and punctuation"&gt;文字&lt;/span&gt; 有一些
   &lt;span data-descr="small popups which also hide again"&gt;提示&lt;/span&gt;。&lt;br /&gt;
-  把鼠标放上去&lt;span data-descr="not to be taken literally"&gt;看看&lt;/span&gt;.
+  把鼠标放上去&lt;span data-descr="not to be taken literally"&gt;看看&lt;/span&gt;。
 &lt;/p&gt;
 </pre>
 
 <pre class="brush: css">span[data-descr] {
-  position: relative;
-  text-decoration: underline;
-  color: #00F;
-  cursor: help;
+ 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;
+ 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="输出_3" style="line-height: 18px;">输出</h4>
 
-<p>{{ EmbedLiveSample('Tooltips', 450, 120) }}</p>
+<p>{{ EmbedLiveSample('Tooltips', 450, 160) }}</p>
 
 <h2 id="规范">规范</h2>
 
-- 
cgit v1.2.3-54-g00ecf