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

Analysis of the principles of several ways to imitate the magnifying glass effect in CSS3

Use pictures to realize personalized underline of hyperlinks

Analysis of the principles of several ways to imitate the magnifying glass effect in CSS3

MySQL uses limit to implement paging example method

Pure CSS3 realizes the effect of div entering and exiting in order

Problems with index and FROM_UNIXTIME in mysql

Docker and portainer configuration methods under Linux

Detailed explanation of deploying Elasticsearch kibana and ik word segmenter in docker

Let's take a look at some powerful operators in JavaScript

Pure CSS drop-down menu

An article to master MySQL index query optimization skills

Nginx compiled nginx - add new module

Recommend

Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding

Vue.set() and this.$set() usage and difference

mysql subquery and join table details

MySQL 8.0.12 decompression version installation tutorial

React tips teach you how to get rid of hooks dependency troubles

Steps to use autoconf to generate Makefile and compile the project

JavaScript dynamically generates a table with row deletion function

CSS to achieve the small sharp corner effect of bubbles

A brief introduction to Linux performance monitoring commands free

Installation, configuration and uninstallation of MySQL 8.0 in Windows environment

Example steps for implementing class selectors and name attribute selectors in js

MySQL time types and modes details

How to completely delete and uninstall MySQL in Windows 10

Detailed process of SpringBoot integrating Docker

MySQL 8.0.12 installation and environment variable configuration tutorial under win10