反向扩展psuedo元素之后/之前的方向

Question

我在做什么：让图片向下移动一列奇数div与浮动左右divs向右浮动。
一切正常，但我遇到了一些麻烦psuedo类的大小等等。
问题简而言之：我有psuedo元素：在显示其中一个图像悬停的信息并且宽度为：auto;它很好，从左侧扩展应该和文本长度没有问题。虽然在试图做同样但相反的一面时，文本长度通常会与图像本身重叠，因为它从左侧展开。

问题：如何更改psuedo元素的扩展方向：after或：before（并不重要）从右向左展开自动，而不是默认从左到右，宽度为auto。
此处的问题示例 https://jsfiddle.net/fd0p537r/

.outer{display:inline-block;width:240px;background-color:Blue;}
.outer div{background-color:Red;margin:10px 50px;width:3em;height:3em;}
.outer div:after{visibility:hidden;position:absolute;width:auto;line-height:30px;background-color:cadetblue;}
.outer div:hover:after{visibility:visible;}
.outer div:nth-child(odd){float:left;}
.outer div:nth-child(even){float:right;}
.outer div:nth-child(odd):after{margin-left:3em;}
.outer div:nth-child(even):after{margin-left:-3em;}
.outer div:before{visibility:hidden;position:absolute;width:auto;line-height:30px;background-color:cadetblue;}
.outer div:hover:before{visibility:visible;}
.one:after{content:"oneoneoneone";}
.two:after{content:"Two";}
.three:after{content:"Three";}
.four:after{content:"FourFourFour";}



<div class="outer">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>

Answer 1

使用:before，the ch measurement，等宽字体和margin-left

在小提琴的CSS结尾处进行这些更改

/* use a monospace font */
.one, .two, .three, .four { font-family: Consolas, monospace; }

.one:after{content:"oneoneoneone";}

/* place the content before and */
/* make use of the monospace */
.two:before{content:"Two"; margin-left: -3ch }

.three:after{content:"Three";}

/* place the content before and */
/* make use of the monospace */
.four:before{content:"FourFourFour"; margin-left: -12ch }

有效，但可能不像你想要的那样充满活力。