Use css to add an arrow icon to the right of text hyperlink text

Many well-known websites add an arrow icon to the right of the text link, such as Google Webmaster Management Backend, Alexa official website, etc. The advantage of this design is to make the link more eye-catching and easier to identify.

To add an arrow icon to the right of the text link, most people use css background images to achieve this, including the Google webmaster management background mentioned above, Alexa official website, etc. Yes, this method is the easiest to master and apply. This is exactly how this article will introduce you.

Let’s take a look at the renderings first.

css background image implements adding an arrow icon to the right of the text chain

The above picture shows two hyperlink styles, which are two different arrow icons. In fact, they are a background image. We can automatically add such a background image to the right of the text chain through CSS.

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, url is an image address. In the above css code, the url uses a base64 string of an arrow icon (Introduction: Use the browser to easily obtain the base64 string of the image). The advantage of this is that you no longer need to request images, saving time and improving submission efficiency.

The following is the key code of html:

<p>
    <font style="font-size:16px;font-weight:bold">超链接样式一</font><br>

Use select control in html to achieve the effect of drop-down menu very easily. However, since the select control can only change the length, but cannot change the height, color and other styles, it sometimes seems unsightly to match the overall layout in web design. For this reason, the drop-down menu implemented by p+css is widely used by web designers. Through p+css, you can achieve the style effect you want as you like, making the drop-down menu and the overall layout of the web page more beautiful and harmonious.

As you can see from the above html code, we actually don’t need to write any additional code, just a normal hyperlink. The advantage of this is that we can modify the css code at any time to set different styles of hyperlinks. Whether or not the arrow icon on the right is needed, it can be easily done in css.

The complete html code is as follows:

 






     

       超链接样式一

          html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，p+css实现的下拉菜单便大量被网页设计师使用。通过p+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。
     

[Related recommendations]

1. CSS3 Free Video Tutorial

2. Tutorial on the use of H5 and CSS3 form validation

3. CSS3 code tutorial to complete a square box rounded corner effect

4. Teach you how to draw standard circular patterns with CSS

5. Teach you how to write CSS styles in a standardized way

The above is the detailed content of Use css to add an arrow icon to the right of text hyperlink text. For more information, please follow other related articles on the PHP Chinese website!