使用CSS3对链接颜色与下划线进行优化

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        *{margin:0px;padding:0px;list-style:none;}
        body{font-family:‘Microsoft Yahei‘;}
        ul{margin-top:10px;}
        a,a:hover{text-decoration:none;}
        a{display:block;width:100px;padding-bottom:15px;
            height:20px;line-height:20px;text-align: center;
            font-size:14px;color:#000;transition:all .3s linear;
            position:relative;
        }
        a:hover{color:#f00;}
        a:after{
            content:‘‘;
            display:block;
            width: 100%;
            overflow:hidden;
            height:19px;
            line-height:0px;
            border-bottom:1px solid red;
            position:absolute;
            left:0px;
            top:0px;
            transition:all .3s linear;
            transform:scaleX(0);
        }
        a:hover:after{
            transform:scaleX(.9);
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="javascript:;">测试内容1</a></li>
        <li><a href="javascript:;">测试内容2</a></li>
        <li><a href="javascript:;">测试内容3</a></li>
        <li><a href="javascript:;">测试内容4</a></li>
        <li><a href="javascript:;">测试内容5</a></li>
    </ul>
</body>
</html>
时间： 2024-07-30 09:27:52

使用CSS3对链接颜色与下划线进行优化的相关文章

AttributedString - 富文本（不同字体大小颜色，下划线中划线）

1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @end 6 7 @implementation ViewController 8 9 - (void)viewDidLoad { 10 [super viewDidLoad]; 11 // Do any additional setup after loading the view, typically from a nib. 12 13 NSArray

CSS3:实现一个循序渐进的下划线和一个Material Button【No JS】

前言 两个效果,一个是从无到有循序渐进的下划线效果:一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手 效果图 实现原理 下划线的很简单:就是before结合hover,配合transition过度来实现从无到有的渐进过程:为什么需要两个transtion过渡,因为我们要考虑脱离hover状态,也需要渐进回收,这样看起来才比较舒适.. MD按钮(active): 这个效果是我看到我手机上(S7 EDGE)设置有这个效果,就突然想试试用CSS3能不能写: 这里涉及到的知识点有[居中,层级的先后,以

a标签鼠标经过，字颜色和下划线的颜色都变红

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> a:hover{ color:red; } </style> </head> <body> <a href="#">dsfsdlfjdsljfsdlfjdslfjsdlfjk

html 去掉html超链接下划线

去掉html超链接下划线 2012-08-30 17:31:00|  分类: css|举报|字号 订阅 我们可以用CSS语法来控制超链接的形式.颜色变化. 下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色:当鼠标在链接上时有下划线,链接文字显示为红色:当点击链接后,链接无下划线,显示为绿色. 实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制: <style type="text/css"> <!

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

我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色:当鼠标在链接上时有下划线,链接文字显示为红色:当点击链接后,链接无下划线,显示为绿色. 实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制: <style type="text/css"> <

如何去掉a标签的下划线

首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符包括: 总: a 表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color:blue} ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:activ

去掉a标签的下划线

<a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符包括: 总: a          表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color:blue} ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:active{color:blue} ④

字体的下划线

NSString * sit= @"忘记密码"; NSMutableAttributedString *sti =[[NSMutableAttributedString alloc]initWithString:sit]; //设置背景颜色以及下划线 NSDictionary * dict1 = @{//字体颜色 NSForegroundColorAttributeName:[UIColor colorWithRed:33/255.0 green:125/255.0 blue:192/

Android--去除EditText边框，添加下划线

<span style="font-family: Arial, Helvetica, sans-serif;"><?xml version="1.0" encoding="utf-8"?> </span> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_wi