el-link 组件用于创建链接,并且你可以通过自定义 CSS 来改变其下划线的颜色。以下是如何实现这一点的详细步骤: 1. 确认 Element UI 版本 首先,确保你的项目中已经安装了 Element UI,并且你知道你所使用的版本。不同版本的 Element UI 可能在样式上有所差异,但基本的自定义方法通常是相同的。
};</script><stylelang="less"scoped>// 默认样式.myLink{display: inline-block;cursor: pointer;font-size:14px;font-weight:500;color:#666; // 默认颜色,当然也可以使用type类型的配色text-decoration: none; // 去除a标签默认的下划线(不使用自带的下划线效果)position: relative; // 定位搭配伪元素实现...
二、el-link下划线颜色自定义 ① 样式设置,这里的style设置不能改变下划线的颜色,下划线的颜色还需要额外设置 <el-link style=" font-weight: bold; color: #ffffff; margin-top: 40px; font-size: 13px; " >READ ALL + </el-link> ② 下划线颜色设置 .el-link.el-link--default:after, .el-link.e...
};</script><stylelang="less"scoped>// 默认样式.myLink{display: inline-block;cursor: pointer;font-size:14px;font-weight:500;color:#666; // 默认颜色,当然也可以使用type类型的配色text-decoration: none; // 去除a标签默认的下划线(不使用自带的下划线效果)position: relative; // 定位搭配伪元素实现...
{display:inline-block;cursor:pointer;font-size:14px;font-weight:500;color:#666;//默认颜色,当然也可以使用type类型的配色text-decoration:none;//去除a标签默认的下划线(不使用自带的下划线效果)position:relative;//定位搭配伪元素实现悬浮下划线效果margin:4px;.aContent{display:flex;align-items:center;}//...
// 通过变量控制是否有这个underline类名,从而控制是否有下划线 .underline:hover::after { // 这样的话,元素在哪,下划线就在哪里 content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: -2px; // 注意,这里不设置颜色,就会跟随参考定位的元素的颜色了 ...