超有意思的 html 面

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1888 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://secretgeek.github.io/html_wysiwyg/html.html

面

HTML

有意思

超

17 条回复 2020-10-20 19:28:34 +08:00

ashine

2020-10-19 22:21:56 +08:00

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

wanacry

2020-10-19 22:23:04 +08:00 via iPhone

有意思的点在哪？

opengps

2020-10-19 22:26:32 +08:00

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

JmmBite

2020-10-19 22:30:40 +08:00

```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

2020-10-19 22:31:06 +08:00

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

finian

2020-10-19 22:31:43 +08:00

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

yuzo555

2020-10-19 22:33:31 +08:00

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

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