Why the :Before and :After Pseudo-Elements Work Only in Firefox

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.

before && :after pseudo elements not showing Firefox

You cannot use ::after and ::before on elements that cannot have content, such as <input /> or <img />.

::after and ::before work like this:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

They get inserted before and after the content of a DOM node. Since <input /> cannot have content, there's nowhere to put it.

Now let's check with a checkbox:

<input type="checkbox" />
<next-element>***content***</next-element>

Here, there cannot be ***content*** to surround with pseudo elements.

Firefox not displaying :after pseudo-element

Most browsers don't support pseudo-elements on img tags.

From 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.

See this answer for an explanation as to why.

Pseudo-elements ignored by FireFox

Use this:

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

It's cross-browser and works.

Example:

<div class="clearfix">
   <div style="float:left;">1</div>
   <div style="float:left;">2</div>
   <div style="float:left;">3</div>
   <div style="float:left;">4</div>
</div>

Added style="float:left;" to show they are floating, but don't use inline CSS.
No need for extra markup just to clear.

What is the correct behavior of ::before and ::after pseudo-elements on details ?

From the quotes you give, it seems that Chromium is in violation of the HTML requirements (should not be shown when details is closed) and Firefox is in violation of the CSS requirements (::before should precede the summary).

However, we also have the rendering requirements from the HTML specification, which for details/summary says:

The details element is expected to render as a block box. The element is also expected to have an internal shadow tree with two slots. The first slot is expected to take the details element's first summary element child, if any. The second slot is expected to take the details element's remaining descendants, if any.

So we only have two slots, and one slot is dedicated to the summary element. The other slot takes the remaining content, including that of the ::before and ::after pseudo elements. Such an arrangement can only be consistent with Firefox's behaviour.

---

Update: It turns out that the conclusion of the above answer is incorrect, at least according to Chrome's dev's - See the bug report.

Apparently, pseudo-elements do not ever participate in the slotting process, possibly because the process of slotting is a DOM - specifically a shadow DOM - operation. As such, at the time of slotting, pseudo elements - which are generated by the application of styling - don't exist, and therefore cannot participate in the slotting process. So they end up getting added at a later time in the rendering process around the entire already slotted arrangement, making Chromium's behaviour correct.

Positioning of pseudo-elements like :after in Firefox

Looking for something like this Link

CSS:

th.title::after {       
    margin-right: 5px;
    float:right;
    content:'>';
}

Transitions on pseudo-elements not working on firefox browser

This appears to be because the #nav ul li a elements are the default display: inline. Adding display: inline-block; to these elements fixes the issue.

Working Example:

#nav {       height:60px;    background-color:#FFFFFF;    overflow:hidden;}
#nav ul {    color: #f2f2f2;    margin-top:20px;    list-style-type: none;    text-align: center;    float:left;}
#nav ul li{    display: inline-block;    *display: inline;    zoom: 1;    margin: 0 10px;   }
#nav ul li a {    color: #8198A0;    font-style: normal;    font-size: 14px;    font-weight: 500;    letter-spacing: 0.25px;    text-transform: uppercase;    text-decoration: none;    display: inline-block;    -webkit-transition: color 0.5s ease;    -moz-transition: color 0.5s ease;    -o-transition: color 0.5s ease;    transition: color 0.5s ease;}
#nav ul li a:after {    margin-top:16px;    content: "";    display: block;    height: 5px;    width: 0;    -webkit-transition: width 0.5s ease, background-color 0.5s ease;    -moz-transition: width 0.5s ease, background-color 0.5s ease;    -o-transition: width 0.5s ease, background-color 0.5s ease;    transition: width 0.5s ease, background-color 0.5s ease;    pointer-events:none;}
#nav ul li a:hover:after {    width: 100%;    background-color:#8198A0;}
#nav ul li a:hover{    cursor: pointer;}

<div id="nav">    <ul>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>    </ul></div>

CSS :before and :after pseudo elements not displaying after slideToggle(); fires in all browsers but Firefox

Annnnd I managed to see what my issue was, so I'm posting as a future reference to all as to the issue. If you go back through the code you'll notice this piece at the top of the CSS:

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

As you may know, this is a CSS trick to make dealing with box widths easier to understand while developing a site. It renders a block level element's width such that if you set width: someNumber; it will then render the box width to always be that regardless of padding and border width. If you go without the reset rule above you have to set widths factoring in the width of the pad and border. (e.g. with reset: width = width + pad + borderWidth, without reset: width = width - (pad - borderWidth) Read More: http://css-tricks.com/box-sizing/

Evidently, this does not work in any browser but Firefox when a blanket rule of box-sizing: border-box is set - hence it will make this fail to work as the width of the box is bound by this box-sizing rule. To counter act this it either must be overridden in all applicable styles, or the blanket style must be taken down in favor of only applying it to the elements that you want to apply it to.

So in this instance, I removed the blanket style in favor of putting it only on the elements that I wanted rather than having it on everything. Problem fixed! And it even works in IE8!

---

Related Topics