先看效果

乍一看，是不是感觉很简单，仔细一瞅发现事情好像没有那么简单。

如果十分钟还没想出怎么实现，那就把简历上的“精通css”改成“了解css”……

大部分人第一感觉都是想着用border-bottom去做，但是仔细看一下这个是多行文本，下划线始终在最后一行肯定是不合适的，而且下划线运动轨迹是：鼠标移入-从从到尾显示，鼠标移出-从头到尾消失。

代码实现

让我们进入正题，这个效果是使用css的线性渐变linear-gradient实现的，具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .container {

      width: 400px;

    }

    .link {

      font-size: 1.2em;

      line-height: 1.6em;

      text-decoration: none;

      font-family: sans-serif;

      color: #333;

    }

    .underline {

      width: calc(100%); /* 兼容IE */

      background-image: linear-gradient(transparent calc(100% - 2px), powderblue 2px);

      background-repeat: no-repeat;

      background-position: right;

      background-size: 0% 100%;

      transition: background-size 1s ease;

    }

    .link:hover .underline {

      background-position: left;

      background-size: 100% 100%;

    }

  </style>

</head>

<body>

  <div class="container">

    <a class="link" href="#">

      <span class="underline">I'm a super cool link because my underline animation works even in

        multiple lines!

      </span>

    </a>

  </div>

</body>

</html>

这里修改了background-position属性设置背景图像的起始位置，使得鼠标移出后的下划线运动轨迹是从头到尾消失，而不是反过来，如果不设置则是如下效果：

这个效果代码我就不复制了，把上面的background-position: right;和 hover 中的background-position: left;删掉就是了。

CSS 多行文本超链接下划线动效的更多相关文章

  1. css命名为何不推荐使用下划线_

    一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符,这也是在写JS时惯用的写法. 用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让 ...

  2. PowerPoint超链接字体颜色修改、怎么去掉超链接下划线

    经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...

  3. css：url链接去下划线+点击前黑色+点击时灰色+点击后黑色

    一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...

  4. CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案

    经过查阅,如果想要去掉a标签的默认效果,就要用text-decoration: none;,但是经过试验发现并不好用,可能是因为你用a标签里的class或id定义的CSS样式,就像这样: <di ...

  5. 解决<a>文本本身带下划线和超链接下划线重合的问题

    <a style="padding-bottom: 1PX;border-bottom: 1PX #254fc5 solid;text-decoration: none;"& ...

  6. CSS魔法堂：更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

  7. 使用CSS去除 去掉超链接的下划线方法

    我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...

  8. CSS超链接样式，去除下划线等

    控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...

  9. 如何去掉a标签的下划线

    首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符 ...

  10. 前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

随机推荐

  1. 容器基础-- namespace,Cgoup 和 UnionFS

    Namespace 什么是 Namespace ? 这里的 "namespace" 指的是 Linux namespace 技术,它是 Linux 内核实现的一种隔离方案.简而言之 ...

  2. 【WALT】WALT入口 update_task_ravg() 代码详解

    目录 [WALT]WALT入口 update_task_ravg() 代码详解 代码展示 代码逻辑 ⑴ 判断是否进入 WALT 算法 ⑵ 获取 WALT 算法中上一个窗口的开始时间 ⑶ 如果任务刚初始 ...

  3. Github入门教程（新版）

    GitHub 的介绍与使用 GitHub 注册一个账号 直接在首页注册即可啦 要注意的是 第一项 username 别人是可见的 后面修改也会比较麻烦,所以起个好名字很重要 个人主页介绍 刚注册好的页 ...

  4. sensor有点意思之RCCB传感器

    1.RCCB sensor 无意中看到一种特殊规格的传感器,RCCB (Red-Clear-Clear-Blue)sensor,第一次听到这个名词,咱不知道就查一查,检索到RCCB sensor是一种 ...

  5. Hexo博客使用valine评论系统无效果及终极解决方案

    注意事项 有一些博主valine评论系统无效果,有一些原因: 1.很大程度是因为next的版本升级导致某些参数设置不同 2.valine评论是基于LeanCloud,还有一个文章阅读次数功能也是用Le ...

  6. Rust 学习笔记：快速上手篇

    Rust 学习笔记:快速上手篇 这篇学习笔记将用于记录本人在快速上手 Rust 编程语言时所记录的学习心得与代码实例.为此,我会在本笔记库项目的Programming/LanguageStudy/目录 ...

  7. C语言变量常量

    目录 前言 一.数据类型 1.整形 2.浮点型 3.字符型 二.变量的操作 1.变量的创建 2.变量的使用 2.1 变量的赋值 2.2 变量的加减 2.3 变量的隐式类型转换 2.4 强制类型转换 3 ...

  8. pandas去重方法

    原文链接:https://blog.csdn.net/missyougoon/article/details/83926840 数据去重可以使用duplicated()和drop_duplicates ...

  9. pandas 显示所有的行和列

    import pandas as pd # 显示所有列,所有行 pd.set_option('display.max_columns', None) pd.set_option('display.ma ...

  10. OpenApi（Swagger）快速转换成 TypeScript 代码 - STC

    在现代的 Web 开发中,使用 OpenAPI(以前称为 Swagger)规范来描述和定义 API 已经成为一种常见的做法.OpenAPI 规范提供了一种统一的方式来描述API的结构.请求和响应,使得 ...