Home > Article > Web Front-end > How to hide hyperlink text from css code
How to hide hyperlink text from css code
- 云罗郡主forward
- 2018-11-22 17:19:393829browse
The content of this article is about how to hide the css code in hyperlink text. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .
Hide the text in the hyperlink and use css skills layout method
Sometimes when div css web page layout, the hyperlink a tag is used, but the text needs to be hidden, but the hyperlink does not become invalid. . For example, for a hyperlink to a picture or icon, use the picture or icon as a background image. Use hyperlink a to add text, but you don’t want the text to be displayed. If the hyperlink exists, it can be clicked, and the picture can also be seen. In this case, the hyperlink text is hidden. .
Use CSS attribute words: text-indent
text-indent introduction:
The text content indent attribute is commonly used to indent two characters at the beginning of a paragraph. For example, if you indent each paragraph of an article by two Chinese characters, just set text-indent.
To hide, you can also use text-indent to achieve it. For example, set text-indent:-999px or text-indent:-9999px to indent the text in the object forward by 9999px to achieve the hiding effect.
The hyperlink exists and the text hidden css layout case is as follows:
1. Case code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接存在文字隐藏 在线演示</title>
<style>
.logo{ margin:0 auto;width:175px; height:51px;
background:url(phplogo.gif) no-repeat 0 0}
.logo a{ display:block; width:100%; height:100%; text-indent:-9999px}
</style>
</head>
<body>
<div class="logo"><a href="http://www.php.cn/">php中文网</a></div>
</body>
</html>
Set a class=logo box, set the thinkcss website logo as the background image, and set the width and height.
First set the css width, css height, and logo image as the background in the ".logo" selector;
Then set the hyperlink a in the class=logo object to form a block (let Hyperlink a width and height take effect), set the width and height, and set text-indent:-9999px to hide the text in the hyperlink. Of course, the text is hidden, but the hyperlinks and background images are retained.
The above is a complete introduction to how to hide the css code in hyperlink text. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to hide hyperlink text from css code. For more information, please follow other related articles on the PHP Chinese website!