伪类中使用element图标

简介: 如何在CSS伪类中使用Element UI图标,以及伪类与伪元素在CSS3中的区别和应用。

伪类中使用element图标

/deep/.el-step.is-horizontal .el-step__line::after {
   
  content: "\e6e0";
  font-family: element-icons; 
  position: absolute;
  right: -8px;
  font-weight: 500;
  top: -11px;
  font-size: 22px;
}

这一行是必须加的:

  font-family: element-icons;

在这里插入图片描述

目录
相关文章
|
4月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
84 0
element-plus 树形控件结合下拉列表
要将Element Plus的Tree控件与下拉列表结合起来,可以使用Element Plus的Select控件和Tree控件的插槽来实现。
403 0
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
819 0
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
2693 0
|
9月前
|
XML 前端开发 小程序
css实例(一)鼠标hover下拉菜单
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。 css 复制代码
122 0
|
9月前
|
XML JavaScript 小程序
element-ui下拉菜单组件Dropdown
<div id='app' style="margin:50px;"> <!-- 鼠标滑过显示下拉列表 这里设置了触发的方式,注意触发方式不能使用’:’绑定,以及绑定了触发选项时的方法 --> <el-dropdown trigger="hover" @command="handleCommand" > <span class="el-dropdown-link el-input__inner" style="display:block;width:200px;"> <!-- 没有选项的时候,默认显示的
183 0
|
Web App开发 JavaScript 前端开发
Element-ui 滚动条美化
有时候为了使界面滚动条,各个浏览器的滚动条能保持一致,这样我们的项目避免在各个浏览器存在差异导致UI界面的不一致,这时候我们就可以考虑使用通用组件的方式,对各个需要滚动的页面,或者弹出窗口添加统一的组件进行包裹,来保证滚动效果在各个浏览器中能有更好的体验效果。最后我们看到各个浏览器中滚动条的效果,基本上各个浏览器的表现效果是一致的,添加通用组件,默认情况下滚动条是不显示的,只有鼠标移动过去才会进行显示,整体上效果和用户体验会更好。在源码顶部,看到有一个链接地址,是参考另一个插件的实现,如下所示。
Element-ui 滚动条美化
|
开发者
记一个Element-plus的ElMessageBox样式被遮挡问题
使用Element-plus开发时,发现ElMessageBox被El-Table遮挡
826 1
element-ui中Select 选择器去除点击时的淡蓝色边框
element-ui中Select 选择器去除点击时的淡蓝色边框
|
前端开发
一个使用:focus-within伪类实现的button选中动画效果
一个使用:focus-within伪类实现的button选中动画效果
158 0
一个使用:focus-within伪类实现的button选中动画效果