Use CSS to implement text hyperlink text to the right plus an arrow icon

Many well-known websites are on the right side of the text chain with an arrow icon, such as Google Webmaster Management backstage, Alexa official website, such as the advantages of this design is to make the link more visible, easier to identify.

Text chain to the right with an arrow icon method, most people use CSS background map to achieve, including the above mentioned Google Webmaster Management background, Alexa official website and so on. Yes, this method is the easiest to master and apply. This is the implementation method to be introduced in this article.

Take a look first.

CSS background image to implement the text chain to the right with an arrow icon

Show two hyperlink styles, two different arrow icons, in fact, they are a background map, we can use CSS to the right side of the text chain to automatically add such a background map.

The CSS code is as follows:

. content{    width:600px;    margin:30px 30px 30px 30px;    font-family: "Microsoft Yahei", Georgia, "Times New Roman", Times,serif;    font-size:14px;    Color: #333;    line-height:185%;}. Content a {Background:url (data:image/png;base64,ivborw0kggoaaaansuheugaaaaoaaaakcayaaacnms+ 9aaaavkleqvr4xn3pgqkamqhduxfqtu7kttkpd5ra8ainfartq2irxfwt2qedafttj2fspioe1ecoleuowwjgzyab/ikegorxxhqb+ ua9bfcm0lazuh+yiead+caqsz4kcmuaaaaasuvork5cyii=) center right no-repeat;    padding-right:13px;    margin-left:3px;    margin-right:3px;    Text-decoration:underline;    Color: #c30;}. Content A:hover {    color:blue;}

The key code is background:url here, the URL is a picture address. The above CSS code, the URL uses an arrow icon base64 string, (Guide: Use the browser to easily get the picture base64 string), the advantage is no need to request pictures, save time, submit efficiency.

Here is the HTML key code:

<p>    <font style= "font-size:16px;font-weight:bold" > Hyperlink style one </font><br>

HTML uses the <a href= "#" >select control </a>, which makes it very easy to achieve the effect of a drop-down menu. However, because the <a href= "#" >select control </a> can only change the length, cannot change the height and color style, so in the web design sometimes appear with the overall layout is not very beautiful. For this reason, <a href= "#" >P+CSS implementation of the drop-down menu </a> is widely used by web designers. Through the P+CSS, you can do whatever you want to achieve the style effect, so that the drop-down menu and the overall layout of the Web page to match the more beautiful harmony.

</p>

The above HTML code to see, in fact, we do not have to write any additional code, normal hyperlinks can. The advantage of this is that we can change the CSS code at any time, to set the different styles of the hyperlink, need not need the right arrow icon, can also be easily done in CSS.

The complete HTML code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
"Recommended"

1. CSS3 Free Video Tutorial

2. Tutorial on using H5 and CSS3 forms validation

3. CSS3 a code tutorial to complete a box fillet effect

4. Teach you to use CSS to draw standard circular patterns

5. Teach you how to write a standard CSS style