先看效果

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

如果十分钟还没想出怎么实现，那就把简历上的“精通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. Kubernetes(k8s) 资源限制：resources，LimitRange，ResourceQuota

    目录 一.系统环境 二.前言 三.Kubernetes资源限制简介 四.创建没有资源限制的pod 4.1 创建没有资源限制的pod 4.2 内存消耗测试 五.使用resources字段配置资源限制 5 ...

  2. 采集douban

    # -*- coding: utf-8 -*-"""Created on Thu Oct 31 16:14:02 2019 @author: DELL"&quo ...

  3. Java扩展Nginx之六：两大filter

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<Java扩展Nginx> ...

  4. Redis核心技术与实践 02 | 数据结构：快速的Redis有哪些慢操作？

    原文地址:https://time.geekbang.org/column/article/268262 博客地址:http://njpkhuan.cn/archives/redis-he-xin-j ...

  5. Linux 性能监控与分析相关的软件包

    检测系统进程和资源使用情况 -- procps-ng procps-ng是一个用于检测Linux系统进程和资源使用情况的系统工具,它是procps的一个重写版本.它提供了多种用于检测Linux系统中进 ...

  6. Redis从入门到放弃（3）：发布与订阅

    1.介绍 Redis是一个快速.开源的内存数据库,支持多种数据结构,如字符串.哈希.列表.集合.有序集合等.除了基本的数据存储和检索功能外,Redis还提供了许多高级功能,其中之一就是发布订阅(Pub ...

  7. 解决： better-scroll.esm.js?f40f:180 [BScroll warn]: EventEmitter has used unknown event type: "pullingUp"

    改为这样,把所有值设为true mounted() { // 滚动条 this.scroll = new BScroll(this.$refs.wrapper, { click: true, obse ...

  8. Unity的IPostprocessBuild：深入解析与实用案例

    Unity IPostprocessBuild技术文章 Unity IPostprocessBuild是Unity引擎中的一个非常有用的功能,它可以让开发者在构建项目后自动执行一些操作.这个功能可以帮 ...

  9. 一篇博客带你上手Git

    概述 安装Git 下载官方网站,下载后安装包样式:双击安装,安装成功后右键文件会有如下选项证明安装成功. 基本配置 设置用户信息,桌面右键,选择Git bash here hecheng@LAPTOP ...

  10. [python]为指定目录下的文件名批量加前缀

    前言 功能描述:批量重命名指定目录下的文件,文件名加前缀,默认格式为"目录名_原文件名". 示例代码 import argparse import os import sys im ...