Use pictures to realize personalized underline of hyperlinks

Use pictures to realize personalized underline of hyperlinks
Don't be surprised if you see some kind of underlined link in the picture. Because it’s actually very simple and you can do it, too.
Check out the actual effect here http://5key.net/demo/hyperlink-underline
uploads/200710/29_094308_1.gif
First, let's talk about how to get this colored underline. Maybe you have guessed it, a gradient background image. That’s right! It’s the picture below.
uploads/200710/29_100223_2.gif
Take a look at the CSS below. I think you should have understood the effect of the entire link change.
If it's not too clear. Let's first understand the concept of sliding door body {
font-size:14px;
font-family: Helvetica, sans-serif;
padding:10px;
margin:0px;
}
h1{margin:0; padding:0; font-size:16px; }
p{padding:20px 0 0 0;}
a{
*padding-bottom:1px;
text-decoration:none;
}
a:link{
color:#06F;
background: url(1.gif);
background-repeat: repeat-x;
background-position: 0 16px;
}
a:visited{
color:#06f;
background-image: url(1.gif);
background-repeat: repeat-x;
background-position: 0 16px;
}
a:hover{
color:#039;
background:url(1.gif) repeat-x 0 bottom;
}

<<:  How to use shell to perform batch operations on multiple servers

>>:  Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution

Recommend

Detailed explanation of common methods of JavaScript String

Table of contents 1. charAt grammar parameter ind...

Interpretation of 17 advertising effectiveness measures

1. 85% of ads go unread <br />Interpretatio...

Detailed installation and use of SSH in Ubuntu environment

SSH stands for Secure Shell, which is a secure tr...

Vue template compilation details

Table of contents 1. parse 1.1 Rules for intercep...

React Diff Principle In-depth Analysis

Table of contents Diffing Algorithm Layer-by-laye...

MySQL subqueries and grouped queries

Table of contents Overview Subqueries Subquery Cl...

How to remotely log in to the MySql database?

Introduction: Sometimes, in order to develop a pr...

Implementation method of Nginx+tomcat load balancing cluster

The experimental environment is as follows Here y...

Complete tutorial on installing Apache, MySQL, PHP, LAMP on Ubuntu 18.04

1. Install Apache $ sudo apt update && su...

How to dynamically modify the replication filter in mysql

MySQL dynamically modify replication filters Let ...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

A brief explanation of the reasonable application of table and div in page design

At the beginning of this article, I would like to ...

Vue3.0 project construction and usage process

Table of contents 1. Project construction 2: Dire...

Detailed explanation of the function and usage of keepAlive component in Vue

Preface During the interview, many interviewers m...

Layui implements sample code for multi-condition query

I recently made a file system and found that ther...