有关伪类元素的使用::before ::after 实现rules规定必填项的红色标记位置的变化

最新推荐文章于 2023-07-24 10:46:56 发布

88岁偷懒被抓

最新推荐文章于 2023-07-24 10:46:56 发布

阅读量993

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/newbaby123/article/details/122490410

版权

我们在使用form表单的时候，有时候会使用rule添加验证规则，像是这样

rules: { time: [{required: true,message: "请选择填报时间",trigger: "blur"}

当我们给表单的某一项添加requested:true的时候，会默认在那一项的label左面出现一个红色标记

像这样，其实也没什么，但是如果是多条数据的话，像这样

这时候就会出现一个问题，那就是左侧对不齐，因为有的添加了验证规则，有的没添加，这样会对页面美观造成影响，那么我们的解决方案就是将红色标记移到右边去

首先F12，然后选中有红色标记的位置，查看他的css代码

将这段代码复制下来，复制到style中

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '*';
    color: #F56C6C;
    margin-right: 0px;
    /* margin-left: 122px; */
}

然后这个代码的最后面那个 :before想必大家也能猜出来，这段代码的意思就是在el-form-item的label前面添加一个内容，这个内容是 content里面的*，颜色红色，看懂这段代码我们就可以进行修改了，我们可以选择直接将 before改为after这样就可以了

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';
    color: #F56C6C;
    margin-left: 4px;
}

来看最终效果

这样就完成了，下面给大家简单介绍一下伪类元素

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

看例子：举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

觉得有用的话点赞评论加关注吧~