Which Elements Support the ::Before and ::After Pseudo-Elements

Which elements support the ::before and ::after pseudo-elements?

As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.

List of html elements that support the CSS :before and :after pseudo elements

I put together a list of every HTML element. Some aren't even legal where they're used... but it still seems to work.

If it says "it works" in green letters, that element is supported.

*: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 />

How to use the :before and :after pseudo-elements

You can do something like this:

h3 {  position: relative;  display: inline-flex;  flex-direction: column;  align-items: center;}
h3:before,h3:after {  content: "";  position: absolute;  top: 30px; /* adjust */  background: blue;  width: 30%; /* adjust */  height: 1px; /* adjust */}
h3:before {left: 0}h3:after {right: 0}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h3>About Us <i class="fa fa-comments-o"></i></h3>

To What Self-Closing Elements Can ::before and ::after Pseudo-Elements be Applied

According to the CSS 2.1 spec,

This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification.

But the current draft of Selectors Level 3 only says

The ::before and ::after pseudo-elements can be used to describe
generated content before or after an element's content. They are
explained in CSS 2.1

CSS 2.1 defines replaced elements like this:

An element whose content is outside the scope of the CSS formatting
model, such as an image, embedded document, or applet.

The content of replaced elements is not considered in the CSS rendering model.

According to MDN,

Typical replaced elements are <img>, <object>, <video> or forms
element like <textarea>, <input>. Some elements, like <audio> or
<canvas> are replaced elements only in specific cases.

Therefore, using :before or :after with replaced elements will produce unreliable results.

Why are ::before and ::after pseudo-elements detected but not shown in Chrome?

if use position relative, chrome Taking auto width for before .if use position absolute, logo is displayed correctly.

hr.linha:before {
    position: absolute;
}

How to target ::before and ::after pseudo elements in Internet Explorer 9 Developer Tools?

Quoting from another answer:

IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not.

https://stackoverflow.com/a/14145917/5973334

So the only possible reason would be for something in you code to have activated the “quirks mode”

Why don't :before and :after pseudo elements work with `img` elements?

The spec says...

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

I guess this means they don't work with img elements (for now).

Also see this answer.

Why the :before and :after pseudo-elements work only in Firefox?

Whether there is a restriction is undefined, hence the inconsistent behavior. This is mentioned at the bottom of the relevant section in the spec:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Most HTML form elements are considered replaced elements, including select and option.

Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?

The CSS2 pseudo-elements :before and :after, with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.

The double-colon notation, on the other hand, is new to CSS3. IE9 does support this new notation for ::before and ::after, and likewise for the CSS1 pseudo-elements ::first-line and ::first-letter. Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.

I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.

Css pseudo-element ::before(2); :before and ::before

The CSS spec on content describes all three syntaxes.

:before -- outdated syntax for pseudo elements. Use if older browser support is needed such as IE8. IE9 supports the new syntax. It also seems like iOS Safari does not support the new syntax
::before -- new pseudo element syntax. This is equivalent to ::before(1)
::before(n) -- used to create multiple before elements that can be before other ::befores. Details are in the same spec.
As far as I can tell, no browser supports this.
- http://jsfiddle.net/535Rf/

Which Elements Support the ::Before and ::After Pseudo-Elements