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

Question

我在做什么：有图像向下沿圆柱奇数divs沿float左右divs float float右float。

这一切都很好，但是我简而言之，我在psuedo类的尺寸等上遇到了一些麻烦。











：汽车;它很好，从左侧扩展，文本长度没有问题。尽管在尝试执行相同的操作时，但对于相反的一侧，文本长度通常会在图像从左侧扩展时重叠。



问题：如何改变方向psuedo元素的扩展：之后：之后：之前(不重要(可以从右到左而不是默认的默认值，而不是自动宽度。
此处的示例 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，ch测量，单拼字体和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 }

有效，但也许不像您想要的那样动态的解决方案。