css 右键补选中文字、移除a标签下划线

最新推荐文章于 2022-05-27 16:39:31 发布

原创最新推荐文章于 2022-05-27 16:39:31 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

AboutFrontend 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一些CSS样式的实用技巧，包括如何禁用右键选中效果以及去除a标签的默认下划线，同时提供了美观的自定义悬停效果。

// 右键会选中文字，为了美观将它禁用
#el-tree {
  user-select: none;
  background-color: transparent;
  padding: 0;
}
// a标签移除下划线
a {
    text-decoration: none;
    color: #121314;
    position: relative;
}
a:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 60%;
    left: -0.1em;
    right: -0.1em;
    bottom: 0;
    transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
    background-color: rgba(79, 192, 141, 0.5);
}