aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web
diff options
context:
space:
mode:
authorMap1en_ <maplenagisa@gmail.com>2022-01-26 14:33:12 +0800
committerGitHub <noreply@github.com>2022-01-26 14:33:12 +0800
commit2a4c8d3056f4d6e354e8aac3ab529b59805d256a (patch)
tree53670db8a2d53b211b98e2735349c812cb80502a /files/zh-cn/web
parentab2378b07699fea292480f1c1620586ddaebd1c6 (diff)
downloadtranslated-content-2a4c8d3056f4d6e354e8aac3ab529b59805d256a.tar.gz
translated-content-2a4c8d3056f4d6e354e8aac3ab529b59805d256a.tar.bz2
translated-content-2a4c8d3056f4d6e354e8aac3ab529b59805d256a.zip
fix(doublecolon-after): sample code of tooltips (#3746)
Diffstat (limited to 'files/zh-cn/web')
-rw-r--r--files/zh-cn/web/css/_doublecolon_after/index.html52
1 files changed, 26 insertions, 26 deletions
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>