JSFiddle - React, Tailwind, and code Playground

by pepelsbey

HTML

Bad in opera:
<div class="test" style="right:0%"><div class="test-inner"></div></div>
<div class="test" style="right:25%"><div class="test-inner"></div></div>
<div class="test" style="right:50%"><div class="test-inner"></div></div>
<div class="test" style="right:75%"><div class="vinner"></div></div>
<div class="test" style="right:100%"><div class="test-inner"></div></div>
Good everywhere:
<div class="test test1"></div>
<div class="test test2"></div>
<div class="test test3"></div>
<div class="test test4"></div>
<div class="test test5"></div>

CSS

.test {
    position: relative;
    left: 0;

    width: 50%;
    height: 25px;

    background: red;
    }
.test:before,
.test-inner {
    content: "";

    position: absolute;
    top: 0;
    right: inherit;
    left: 0;

    height: 100%;
    background: lime;
    }

.test1:before { right: 0%; }
.test2:before { right: 25%; }
.test3:before { right: 50%; }
.test4:before { right: 75%; }
.test5:before { right: 100%; }

JavaScript

// 
// 
// Opera inherits the percented values from the computed style of parent