Css: after appearing in firefox

I have a tab that has an arrow after the selected tab. In chrome, etc. This works great. But in Firefox the element doesn't appear. Is there any reason why firefox is not displaying this css? How can I fix the problem using firefox?

li.current::after {      
    color: transparent;
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
    border-width: 15px 15px 0px;
    /* background-position-y: -100px; */
    border-style: solid;
    /* border-color: #30B3EE transparent; */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAyCAMAAAB/N5X1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM4MEIzNDY4MkVEMTFFNEFEQkQ5MEQ0NjQxNkEzMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM4MEIzNDc4MkVEMTFFNEFEQkQ5MEQ0NjQxNkEzMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQzgwQjM0NDgyRUQxMUU0QURCRDkwRDQ2NDE2QTMwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQzgwQjM0NTgyRUQxMUU0QURCRDkwRDQ2NDE2QTMwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu5Tt0gAAAMAUExURbPj92TF7mPE7WHE7WDD7F7C7F3B61vA61m/6li+6la+6VW96VO86FK76FC66E65502450u45kq35ki25Ua15UW05EOz5EKz40Cy4z+x4j2w4juv4Tqu4Tit4f///zet4DWs4DSr3zKq3zCp3i+o3i2o3Syn3Sqm3Cml3Cek2yWj2ySi2yKi2v3+/yGh2h+g2fX7/h6f2eb1+/r9/hye2Of2/OX1/P7//+b2/OX0++X1++f1/OT0++b1/GnA5vT7/hqd2MTm9Vm+6G3C51e65lm+6mO95GzC5/b7/mW/5+T1/FvA6kqy4GfA5mW+5W/D6Oj2/HHD6OP0+2vB5m7C6HPE6We/5trv+fz+/+T1+3HE6GK85GS95f///15eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///5vxyWQAAABedFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wCxyC4mAAABIklEQVR42rzN1y6EURRA4V8fndFbdEYJkbiWiRrRIoYLrPd/DZ0pf9n7nL199ysrSf4Bbd5IoN0XHw86PPH1oNMPPw+6vPD3oNsH9Q96PND4oGSP5ge9xs5ofdBn6oq0B/2WSH8wYIesB4NWyH4wZIO8B8MGjsl/MBKPogejsSh+UI6D5MFYDGQPxsMhfTARCvmDyTBoHkyFQPdgWg/tgxkt9A9mdQh5MKdwStiDeTlCHyxIEf5gUYaYB0sSxD1YLnRJ7IOVAo/EP1jN9YzFg7Uc99g8WM90h9WDjQw17B5spjrB8kElxQW2D7ZaPGD9YLvJEfYPdhrIF5oHu3Vu8Hmw9+sJrwf7327xe3Dw6RXPB4fvzvF9UK2+4P3gWl28CTAATPcdeSiNIiIAAAAASUVORK5CYII=')!important;
    background-position-x: -49px;
    width: 0;
}

      

My jsfiddle:

http://jsfiddle.net/okwhyrpc/10/

+3


source to share


1 answer


The problem stems from a property background-position-x

that is not implemented (yet?) In Firefox: the ability to change one background axis - unfortunately; not currently supported in this browser.



Use instead of background-position: -49px 0

( Fiddle )

+8


source







All Articles