首页 > 其他分享 >vue 通过css 给html元素增加前缀红色星号

vue 通过css 给html元素增加前缀红色星号

时间:2023-08-02 10:47:50浏览次数:49  
标签:vue 星号 label html 红色 css before

<el-form-item> 前面增加红色星号

要为<el-form-item>label增加红色星号,你可以使用CSS中的伪元素 ::after::before 来实现。下面是如何在样式中添加红色星号的示例:

<el-form-item class="red-label" label="物流商信息"></el-form-item>

<style scoped lang="scss">
    .red-label {
      position: relative;
    }

    .red-label::before {
      content: "*";
      color: #F56C6C;
      position: absolute;
      left: 60px; /* 调整星号的位置 */
      top: 10px;
    }
</style>

标签:vue,星号,label,html,红色,css,before
From: https://www.cnblogs.com/pine007/p/17599928.html

相关文章

  • 通过Vue + intro.js 实现页面新手引导流程功能
    最近需要增加一个新手页面引导流程的功能,在网上搜罗之后发现了intro.js这个插件1.安装依赖npminstallintro.js--save2.在main.js中引用插件//首页引导插件importintrofrom'intro.js'//introjs库import'intro.js/introjs.css'//introjs默认css样式//introjs还......
  • vue--day50--todolist案例自定义事件修改footer 和header 修改
    1.MyHeader.vue<template><divclass="todo-header"><!--v-model:="title"是实时绑定的--><inputtype="text"placeholder="请输入你的任务名称,回车键确认"v-model="title"@keyup.enter="add"/>......
  • css 中强制换行后,伪类元素变形,用到的flex-shrink 属性
    之前都没用过这个属性,最近做项目遇到一个不同屏幕下可能会换行的问题,设置了强制不换行,但是伪类元素就没挤没了,请教了同事,用到了flex-shrink属性然后我就去看了看这个属性的用法,简单记录一下flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时......
  • vuex模块化
    importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);importhomefrom"./home"importsearchfrom"./search"conststore=newVuex.Store({modules:{home,search}});exportdefaultstore......
  • css伪类选择器大全
    伪类选择器css伪类选择器大全:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes伪类含义:link选中未访问过的超链接:visited选中已访问过的超链接:hover选中鼠标移入的元素:active选中鼠标按下的元素:focus选中聚焦的表单元素:......
  • ruby web 实战(9)-vue 3基础(3)
    目录选项式API(OptionsAPI)选项式API(OptionsAPI)用包含多个选项的对象来描述组件的逻辑,例如data、methods和mounted。选项所定义的属性都会暴露在函数内部的this上,它会指向当前的组件实例。<script>exportdefault{//data()返回的属性将会成为响应式的状态......
  • Vue进阶用法4
    Vue进阶用法4vue3介绍1.性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking3.拥抱TypeScriptVue3可以更好的支持TypeScript4.新的特性......
  • Vue入门命令2
    Vue入门命令2表单控制#input:checkbox(单选,多选),radio(单选)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script......
  • Vue进阶用法1
    Vue进阶用法1计算属性#如果{{函数()}},每次页面刷新,函数都会重新执行#函数---》当属性来使用,缓存<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"......
  • Vue进阶用法2
    Vue进阶用法2vue项目目录介绍myfirstvue#项目名字node_modules#文件夹,内部有很多当前项目依赖的模块,可以删除,npminstallpublic#文件夹-favicon.ico#网站小图标-index.html......