如何使用伪元素 ::before 实现 Antd 表单一模一样的 required 红色 * 号

zoe_ya

于 2023-07-12 09:20:12 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Constantiny/article/details/131673962

前端专栏收录该内容

29 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何利用CSS伪元素`::before`模仿Antd表单中的required红色星号标记，通过查看元素样式并应用到自定义样式中，实现了与Antd一致的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用伪元素 ::before 实现 Antd 表单一模一样的 required 红色 * 号

背景

在这里插入图片描述
以一个简单的 Form.Item 包裹 Select 为例我们去实现它的 * 号

操作

F12 打开控制台选中这个元素上面查看 CSS 属性
在这里插入图片描述
仿照这个写在 .less 文件里

// .less
.ruleTable::before {
  display: inline-block;
  margin-right: 4px;
  font-family: SimSun, sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #ff4d4f;
  content: '*';
}

在 .jsx 文件引入

<Text className={styles.ruleTable}>选择规则</Text>

在这里插入图片描述
即可实现一模一样的星号