Firefox-CSS: Border-Radius Issue for Pseudo-Element "Before"

Firefox-CSS: border-radius issue for pseudo-element before

In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:

.roundArrow {  border-radius: 0 0 0 10px;  width: 50px;  height: 50px;  overflow: hidden;}
.roundArrow:after {  content: "";  display: block;  top: 0px;  right: 0px;  border-width: 0px 50px 50px 0px;  border-style: solid;  border-color: transparent #f6f6f6 #32a2d4 transparent;}

<div class="roundArrow"></div>

Fix border-radius from behaving inappropriately in Firefox

Actually works fine. Just set background:red and see it.

thead th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
  background:red;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tbody::before, tbody::after {
  position: absolute;
  z-index: -10;
  top: 0; right: 0; bottom: 50%; left: 0;
  background-color: #222;
  content: "";
}
tbody::after {
  top: 50%; right: 0; bottom: 0; left: 0;
  background-color: #444;
}
tfoot {
  background-color: #444;
}

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
  thead {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>

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.

Elements with border radius and overflow hidden don't clip the content properly: 1px issue

Using pseudo elements for background (for dynamic effect) and using the actual background (for smoothness of inner border edge) aren't mutually exclusive. If the container is a root of the stacking context, it's background will be always painted below any descendants, even those with negative z-index. Setting black background to the button (1), making it the root of the stacking context (2) and making pseudo-elements two-color with each half a bit bigger than the inner area of the button and animating its position instead of width seems to solve the white pixels problem.

I used single-color gradient instead of a solid color for the button background to prevent black-on-black button text in browsers that don't support gradients (like Opera Mini). The animation can be even smoother if change transform:translateX or even transform:translate3d instead of left.

a {  color: black}
.anibtn {  display: inline-block;  overflow: hidden;  padding: 8px 20px;  margin: 0 3px 6px 3px;  text-align: center;  border: solid 10px black;  text-decoration: none;  color: $btncolor;  white-space: nowrap;  background: linear-gradient(black,black); /* 1 */}
.anibtn-round {  display: inline-block;  overflow: hidden;  padding: 8px 20px;  margin: 0 3px 6px 3px;  text-align: center;  border: solid 10px black;  text-decoration: none;  color: $btncolor;  white-space: nowrap;  border-radius: 50px;  background: linear-gradient(black,black); /* 1 */}

.tr-fill-on {  position: relative;  transition-duration: .3s;  z-index: 1; /* 2 */}
.tr-fill-on:before {  position: absolute;  content: '';  background: linear-gradient(90deg, white, white 50%, black 50%);  transition: all .3s;  z-index: -1;  left: -1%;  top: -1%;  width: 204%;  height: 102%;}  .tr-fill-on:hover {  color: white;}
.tr-fill-on:hover:before {  left: -103%;}

.tr-fill2-on{  color: white;  position: relative;  transition-duration: .3s;  z-index: 1; /* 2 */}.tr-fill2-on:before {  position: absolute;  content: '';        background: linear-gradient(90deg, white, white 50%, black 50%);  transition: all .3s;  z-index: -1;  left: -103%;  top: -1%;  width: 204%;  height: 102%;}.tr-fill2-on:hover {  color: black;}
.tr-fill2-on:hover:before {  left: -1%;}

<a href="#" class="anibtn tr-fill-on">Ani Buttons</a><a href="#" class="anibtn tr-fill2-on">Ani Buttons</a><a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a><a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>

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.

Border-radius and background not connecting in Firefox only

You could use the technique described in the answer you linked to. Add a FF hack:

-moz-box-shadow:0px 0px 0px #2eb8ae;

CSS is behaving differently on Firefox (version 96 and older) than it is on Chrome

In v96 ::before and ::after are not being considered in the flex layout on the label.

We can achieve the same results without the flax layout:

.outter-wrapper {
  width: 200px;
  border: 1px solid black;
}

.wrapper {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 8px 24px 8px 0px;
  width: 100%;
}

.input {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

.label-wrapper {
  line-height: 1.5rem;
  position: absolute;
  left: 10px;
}

.label {
  position: relative;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 12px;
  flex: 1;
}

.label::before {
  position: absolute;
  right: 0;
  display: block;
  min-width: 20px;
  height: 20px;
  content: "";
  background-color: #fff;
  border: 1px solid black;
  border-radius: 4px;
}

.label::after {
  position: absolute;
  right: 0;
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
}

input[type="checkbox"]:checked~.label::after {
  background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
  width: 20px;
  height: 20px;
  top: 0;
}

<div class="outter-wrapper">
  <div class="wrapper">
    <input class="input" name="checkbox2" id="checkbox2" type="checkbox">
    <label class="label" for="checkbox2">
        <div class="label-wrapper">
          Only works in Chrome
        </div>
      </label>
  </div>
</div>

---

Related Topics