html - 伪元素后/前反向扩展方向

Question

我在做什么:让图像沿着一列奇数 div 向左浮动，向右浮动 div 向右浮动。
一切正常，但我遇到了一些麻烦伪类的大小等。
问题简而言之:我有伪元素:在其中一个图像悬停时显示信息后，width:auto;它很好，可以从左侧扩展，文本长度也没有问题。虽然当尝试做同样的事情时，但对于另一侧，文本长度通常会在图像从左侧扩展时与图像本身重叠。

问题:我如何更改伪元素的扩展方向 :after 或 :before(哪个无关紧要)从右向左扩展 auto 而不是默认的从左向右扩展，宽度为 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

在 fiddle 的 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 }

有效，但可能不是您想要的动态解决方案。