Home >Web Front-end >CSS Tutorial >css control small icon before text
css control small icon before text
- 高洛峰Original
- 2016-11-24 11:22:352003browse
Some list items need to add a small icon before the text, as shown below:
There are many ways to implement it, here the element is used.
The span tag is a line element and has no width and height, although it can be changed through display:block;. But it will cause line breaks.
Posted code:
[html] www.php.cn <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>
Padding-left is used here to realize the appearance of this small icon, which is to make the text click to the right
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Some new features of css3Next article：Some new features of css3