背景
已知ADM的表单星号位置是绝对定位展示在label前面的:
而业务设计稿要求*
和表单内容对齐:
如果*
写在label的前面则去掉absolute
定位即可,但是偏偏写在后面。
解法
此时有一个非常巧妙的方法:
实现,去掉absolute
:
然后给<label>
添加2个样式即可:
原理:
因为星号*
是一个非阿拉伯语或希伯来语等从右到左书写方向的语言的字符,浏览器会将它处理为一个从左到右的孤立符号。当设置direction: rtl;时,文本的主体方向会转变为从右到左,但孤立的并非从右到左书写语言的符号位置保持不变。因此,星号* 被放置到了最左边。
之所以说巧妙,是因为如果星号变成数字或者字母就没有这个效果:
或者如果有多个符号时也不是我们想要的效果: