Analyze the hyperlink interactivity of the official web site of the Consortium

Absrtact: Hyperlinks are essential elements of a Web page. The interactive design of hyperlinks is also the most important detail of a Web page. CSS also prepares a couple of pseudo class selectors for the links, which are used to set hyperlinks to interoperate. But on most sites, we

Hyperlinks are an essential part of a Web page. The interactive design of hyperlinks is also the most important detail of a Web page. CSS also prepares a couple of pseudo class selectors for the links, which are used to set hyperlinks to interoperate. However, in most sites, we see the hyperlink interaction style, usually: change the color of the link, cancel or increase the underline, click the link text color or underline disappeared, and so on. In fact, the interactive design of hyperlinks is not as simple as that.

The website of the official web site has a good interactive link, and it breaks the routine, so let's analyze it. The following figure is a hyperlink interactive operation, of course recommended directly to the official web site to see the results.

Realization principle and analysis

First, it's still a regular hyperlink style with an underscore, but unlike the normal hyperlink style, the underline is thick (2px normal 1px), and the underline and the text color are different (with color and text-decoration The defined hyperlink underline color is the same as the text. So to be sure, the underscore is defined using the Border-bottom attribute, and padding-bottom a few pixels, opening a certain distance. Then the interactive operation is simple, just change the color of the bottom border. When the Click event occurs, the hyperlink does not simply change the color, but it moves down a few pixels, giving the illusion that it is pressed down. For this implementation, you need to use the position relative property, activate the Top property, you can get the hyperlink from the original position downward offset a certain distance.

Now that the analysis is complete, let's start writing the code accordingly.

HTML structure

Just enter some words, add a link to OK.

Here is a casual dozen words, used to do link interaction style demo, Link here.

CSS Styles

div {width:300px; margin:20px auto; line-height:24px;}

div a{text-decoration:none color: #000; padding-bottom:1px;}

Div A:link, div a:visited{border-bottom:2px solid #f00;}

Div a:hover{border-bottom:2px solid #00f;}

Div a:active{border-bottom:2px solid #00f; outline:0 none; position:relative; top:1px;}

The width of the div is defined just to look good, the definition of row height is to not let the underline affect the next line of text, this can be decided by themselves. Then remove the default underline and color for a label, then the interactive operation. Note: Active uses the outline property to prevent some browsers from clicking hyperlinks when they click the hyperlink.

Divergent thinking

Now that you're using a border to simulate underscores, can you make this line an interactive "strikethrough" by adjusting the height of the hyperlink? Of course it's OK, we just need to turn the height attribute down a little bit and make the display property of a a Inline-block , you can make the border go through the text, and the text is still visible because the default property of overflow is visible.

Div a{text-decoration:none;color: #000;p adding-bottom:1px;height:6px;display:inline-block;}

This will achieve the following diagram effect

It is important to note that the a element is an element of the row, and that it is not useful to use the height directly, but to add display:block to the block element, it will break away from the text, so you need the Inline-block attribute added. But in this way, compatibility with earlier IE browsers is not very good.

Making such a hyperlink interactive style is very simple, and interactive effect is very good, usually we should be a little more careful and divergent thinking, in order to continuously improve the user experience.