:Before &&: After Pseudo Elements Not Showing Firefox

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

Firefox ::after pseudo element not working

The problem is the z-index, put a lower z-index to the sidebar class, so it won't be hidden anymore.

Here is a new fiddle, I have just simply put z-index: -2; to the .sidebar selector.

PS (nitpicking): In CSS3 after is not a pseudo-class but a pseudo-element, and there is a new notation for it: ::after (however the old notation still works)

Firefox not displaying properly :before and :after pseudo-elements

You needed to position the absolutely positioned pseudo elements relative to the parent element. Also, inline-block was added to contain the parent element's width.

.submitted {
    position:relative;
    display:inline-block;
}

UPDATED EXAMPLE

Pseudo class :active, Bug in firefox?

:active is the state while - after clicking a link - the browser still displays the old page, but already tries to load and open the new one / the target page. Usually, unless the loading of the new page takes long, this time interval is so short that you'll hardly see it, which is the reason that very often the active state gets the same CSS as hover - not making a visual difference between them..

In your example, source and target page are the same - it's a some-page link. Obviously different browsers handle that differently, concerning the active status. Some interpret the link as "new page loaded", others as "still on the old page" (and therefore still active)...

CSS3 radio button not working in Firefox

Unfortunately, what you're trying to do is not valid -- ::before and ::after do not work on input elements (any input; it's not just restricted to radio buttons).

Proof available here: http://jsfiddle.net/LvaE2/1/ -- even in the most simple case, it doesn't work.

It also doesn't work in IE or Opera. The fact that it does work in Chrome is because Chrome is going beyond the spec in allowing it.

Your best bet is to do your styling on a label element that is linked to the actual radio button using the for attribute, and then set the radio button itself to display:none;. This is how everyone else does it.

Related question here: Which elements support the ::before and ::after pseudo-elements?

Hope that helps.

Extra pixel in before and after pseudo elements

This looks like antialiasing. I guess you have either your browser's either your OS's zoom level set to something else than 100%.

Some browsers will try to round the positionning, but at some zoom level, this can't be done properly and you'll end up having one side floored and the other ceiled.

To circumvent this, you can use the translate property which should allow proper antialiasing to kick in (it will be blurry, but of the same size).

*, *::before, *::after{ box-sizing: border-box; }
body {    display: flex;    flex-flow: column wrap;    justify-content: center;    align-items: center;    background-color: #111;}
img {    max-width: 300px;    display: block;    padding: 4px;}
.main-box {    position: relative;}
.img-box {    padding: 0;    margin: 0;    background-color: #000;}
.img-box::before{    content: '';    position: absolute;    top: 0px;    left: 0px;    width: calc( 100% + 2px );    height: calc( 100% + 2px );    transform: translate(-1px,-1px);    filter: blur(10px);    z-index: -2;}
.img-box::after{    content: '';                  position: absolute;    top: 0px;    left: 0px;    width: calc( 100% + 2px );    height: calc( 100% + 2px );    transform: translate(-1px,-1px);    z-index: -1;}
.img-box::before, .img-box::after{    background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);    opacity: 0.7;    transition: opacity ease-out 150ms;}
.main-box:hover .img-box::after {    opacity: 1;}

<div class="main-box">   <div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div></div>

---

Related Topics