纯CSS修改adm表单星号位置
本文由 小茗同学 发表于 2024-06-26 浏览(119)
最后修改 2024-06-26 标签:

背景

已知ADM的表单星号位置是绝对定位展示在label前面的:

而业务设计稿要求*和表单内容对齐:

如果*写在label的前面则去掉absolute定位即可,但是偏偏写在后面。

解法

此时有一个非常巧妙的方法:

实现,去掉absolute

然后给<label>添加2个样式即可:

原理:

因为星号*是一个非阿拉伯语或希伯来语等从右到左书写方向的语言的字符,浏览器会将它处理为一个从左到右的孤立符号。当设置direction: rtl;时,文本的主体方向会转变为从右到左,但孤立的并非从右到左书写语言的符号位置保持不变。因此,星号* 被放置到了最左边。

之所以说巧妙,是因为如果星号变成数字或者字母就没有这个效果:

或者如果有多个符号时也不是我们想要的效果: