Firefox Not Displaying Properly: Before and: After Pseudo-Elements

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

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)

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.

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.

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!

Pseudo Elements disappear in chrome but not firefox

From my tests: Chrome limits the size of the pseudo-elements :before and :after to 1900px (at least in this case): http://jsfiddle.net/xLF8r/4/

In your case, you set the padding/margins on .bottom to 2900px/-2900px to so the gradient will be seen to the edge of the body. If you change that to 950px/-950px, they show up. If you set the width of the pseudo-elements to 1900px, they show up. If you set right: -280%, they show up (it calculates in this instance to -1900px).

If you look at this fiddle in Firefox, the elements show up no matter what you set these sizes to.

Another test: Changing background-size allowed the element to get larger and stay visible: http://jsfiddle.net/xLF8r/6/

So if you increase your background-size and change your gradient to get it to look like you have it by adding more color-stops, it should work.

From these tests, it would appear that chrome limits the size of the pseudo element to be only 5 times larger than the background-size. 1900px / 380px = 5 in first test; 1901px makes the element disappear. 6900px / 1380px = 5 in the second test; 6901px makes the element disappear.

Edit for another test and for future reference
I was curious, so I created a Codepen looking at some examples. Here, I'm able to go up to 10 times the background-size. Putting the same code into jsfiddle also shows that 10 times is working. So in your code, there is something that is reducing it to 5 times.

I've reduced your code to replicate this same behavior, and I'm still only getting 5 times larger instead of 10. I'm stumped as to why this is the case.

Ellipsis not working correctly in Firefox for pseudo element

You can absolute position the pseudo element. I think the issue is that the ellipsis style is firefox is treating the inline pseudo element as text and triggering the ellipsis, however it is then appending the ellipsis to the actual text. Applying absolute position to the pseudo element will stop this behavior.

UPDATE: After reading about this further it is actually a bug in chrome. Firefox is correctly interpreting the specification for overflow:ellipsis;.

https://bugzilla.mozilla.org/show_bug.cgi?id=1346436

div {  max-width: 170px;  background-color: #c7bdbd;}
h1 {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  position:relative;}
h1:after {  content: '';  width: 100%;  height: 100%;  border-bottom: 1px solid #000;  position:absolute;  bottom:8px;}

<div>  <h1>Title</h1>  <h1>Longer Title</h1></div>

---

Related Topics