diff options
author | Map1en_ <maplenagisa@gmail.com> | 2022-01-26 14:33:12 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-01-26 14:33:12 +0800 |
commit | 2a4c8d3056f4d6e354e8aac3ab529b59805d256a (patch) | |
tree | 53670db8a2d53b211b98e2735349c812cb80502a /files/zh-cn/web | |
parent | ab2378b07699fea292480f1c1620586ddaebd1c6 (diff) | |
download | translated-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.html | 52 |
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: "<- 无聊!"; - color: red; + content: "<- 无聊!"; + 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"><span class="ribbon">Notice where the orange box is.</span></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"><p>这是上面代码的实现<br /> 我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些 <span data-descr="small popups which also hide again">提示</span>。<br /> - 把鼠标放上去<span data-descr="not to be taken literally">看看</span>. + 把鼠标放上去<span data-descr="not to be taken literally">看看</span>。 </p> </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> |