超有意思的 html 頁面

頁面

HTML

有意思

超

17 replies • 2020-10-20 19:28:34 +08:00

ashine

Oct 19, 2020

1

没发现哪里特别的，不就是几个 css 的特性吗

wanacry

Oct 19, 2020 via iPhone

2

有意思的点在哪？

opengps

Oct 19, 2020

1

3

谁解读下用法，html 代码可见但是却不影响只选中文本，我是第一次见

JmmBite

Oct 19, 2020

4

```css
html::before {content:'<html>'}
html::after {content:'</html>'}
head::before {content:'<head>'}
head::after {content:'</head>'}
title::before {content:'<title>'}
title::after {content:'</title>'}
body::before {content:'<body>'}
body::after {content:'</body>'}
h1::before {content:'<h1>'}
h1::after {content:'</h1>'}
h2::before {content:'<h2>'}
h2::after {content:'</h2>'}
p::before {content:'<p>'}
p::after {content:'</p>'}
pre::before {content:'<pre>'}
pre::after {content:'</pre>'}
code::before {content:'<code>'}
code::after {content:'</code>'}
a::before {content:'<a>'}
a::after {content:'</a>'}
aside::before {content:'<aside>'}
aside::after {content:'</aside>'}
blockquote::before {content:'<blockquote>'}
blockquote::after {content:'</blockquote>'}
em::before {content:'<em>'}
em::after {content:'</em>'}
strong::before {content:'<strong>'}
strong::after {content:'</strong>'}
```

xycool

Oct 19, 2020

5

@opengps #3 套娃用法，仔细查看一个标签的样式就能发现，比如：
```h1::before {content:'<h1>'}
h1::after {content:'</h1>'}```

finian

Oct 19, 2020

6

有意思的地方就是源码和展示的内容是一样的

yuzo555

Oct 19, 2020

2

7

用 CSS 的 content 属性实现在常见元素的 before 和 after 加上文字开关；
（@opengps 而 content 属性显示内容是无法被选中的）

然后给 * 所有元素加上 display:block，这样就实现了 <body> 内部的 <style> 内部内容也能显示出来。