logo标签列表

支持CSS :before和:after伪元素的HTML元素列表

htmlcsspseudo-element
15

我知道在空元素中不支持伪元素:before和:after，但是这些元素呢：

  • <select>
  • <option>
  • <textarea>
  • <button>

能否列个清单？谢谢大家！

请确保使用正确的标签 - 伪元素和伪类不是可互换的术语。 - BoltClock
1
@Bolt，你可以制作标签Wiki。当你输入“伪”时，它们会很有帮助，因为会有多个选项。 - Brigand
1
谢谢你提出这个问题！我一直想知道为什么在某些浏览器中img不起作用。 - JayC
@BoltClock 是的，我一直把它们搞混，但我想这次我弄对了。来自w3schools.com："content属性与:before和:after伪元素一起使用，用于插入生成的内容。" - Web_Designer
1个回答
29
我整理了一个包含所有 HTML 元素的列表。其中一些甚至在使用时都不合法...但它似乎仍然能够工作。 如果它以绿色字母显示“it works”，那么该元素得到了支持。
*:not(br):after {
  content: 'it works';
  font-weight: bold;
  padding: 5px;
  color: green;
}
<a>Name: a</a> <br />
<abbr>Name: abbr</abbr> <br />
<address>Name: address</address> <br />
<area>Name: area</area> <br />
<article>Name: article</article> <br />
<aside>Name: aside</aside> <br />
<audio>Name: audio</audio> <br />
<b>Name: b</b> <br />
<base>Name: base</base> <br />
<bdo>Name: bdo</bdo> <br />
<blockquote>Name: blockquote</blockquote> <br />

<body>Name: body</body> <br />
<br>Name: br</br> <br />
<button>Name: button</button> <br />
<canvas>Name: canvas</canvas> <br />
<caption>Name: caption</caption> <br />
<cite>Name: cite</cite> <br />
<code>Name: code</code> <br />
<col>Name: col</col> <br />
<colgroup>Name: colgroup</colgroup> <br />
<command>Name: command</command> <br />
<datalist>Name: datalist</datalist> <br />
<dd>Name: dd</dd> <br />
<del>Name: del</del> <br />
<details>Name: details</details> <br />
<dfn>Name: dfn</dfn> <br />
<div>Name: div</div> <br />
<dl>Name: dl</dl> <br />
<dt>Name: dt</dt> <br />
<em>Name: em</em> <br />
<embed>Name: embed</embed> <br />
<eventsource>Name: eventsource</eventsource> <br />
<fieldset>Name: fieldset</fieldset> <br />
<figcaption>Name: figcaption</figcaption> <br />
<figure>Name: figure</figure> <br />
<footer>Name: footer</footer> <br />
<form>Name: form</form> <br />
<h1>Name: h1</h1> <br />
<h2>Name: h2</h2> <br />
<h3>Name: h3</h3> <br />
<h4>Name: h4</h4> <br />
<h5>Name: h5</h5> <br />
<h6>Name: h6</h6> <br />

<head>Name: head</head> <br />
<header>Name: header</header> <br />
<hgroup>Name: hgroup</hgroup> <br />
<hr>Name: hr</hr> <br />
<html>Name: html</html> <br />
<i>Name: i</i> <br />
<iframe>Name: iframe</iframe> <br />
<img>Name: img</img> <br />
<input>Name: input</input> <br />
<ins>Name: ins</ins> <br />
<kbd>Name: kbd</kbd> <br />
<keygen>Name: keygen</keygen> <br />
<label>Name: label</label> <br />
<legend>Name: legend</legend> <br />
<li>Name: li</li> <br />
<link>Name: link</link> <br />
<mark>Name: mark</mark> <br />
<map>Name: map</map> <br />
<menu>Name: menu</menu> <br />
<meta>Name: meta</meta> <br />
<meter>Name: meter</meter> <br />
<nav>Name: nav</nav> <br />
<noscript>Name: noscript</noscript> <br />
<object>Name: object</object> <br />
<ol>Name: ol</ol> <br />
<optgroup>Name: optgroup</optgroup> <br />
<option>Name: option</option> <br />
<output>Name: output</output> <br />
<p>Name: p</p> <br />
<param>Name: param</param> <br />
<pre>Name: pre</pre> <br />
<progress>Name: progress</progress> <br />
<q>Name: q</q> <br />
<ruby>Name: ruby</ruby> <br />
<rp>Name: rp</rp> <br />
<rt>Name: rt</rt> <br />
<samp>Name: samp</samp> <br />
<script type="application/json">Name: script</script> <br />
<section>Name: section</section> <br />
<select>Name: select</select> <br />
<small>Name: small</small> <br />
<source>Name: source</source> <br />
<span>Name: span</span> <br />
<strong>Name: strong</strong> <br />
<style>Name: style</style> <br />
<sub>Name: sub</sub> <br />
<summary>Name: summary</summary> <br />
<details>Name: details</details> <br />
<sup>Name: sup</sup> <br />
<table>Name: table</table> <br />
<tbody>Name: tbody</tbody> <br />
<td>Name: td</td> <br />
<textarea>Name: textarea</textarea> <br />
<tfoot>Name: tfoot</tfoot> <br />
<th>Name: th</th> <br />
<thead>Name: thead</thead> <br />
<time>Name: time</time> <br />
<title>Name: title</title> <br />
<tr>Name: tr</tr> <br />
<ul>Name: ul</ul> <br />
<var>Name: var</var> <br />
<video>Name: video</video> <br />
<wbr>Name: wbr</wbr> <br />

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接