问题描述
很简单的问题,但我不确定是否可能.我想在所有 <h1> 元素中添加一个图像作为项目符号.我知道我可以通过以下方式实现:
Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1> elements. I know I can achieve this by:
<span class='bullet'></span><h1>My H1 text here</h1>
用css:
.bullet{ background: url('bullet.png') no-repeat; display:inline-block; vertical-align: middle; background-size:100%; height:25px; width:25px; margin-right: 5px; }
但是有没有一种自动的方法来做同样的事情?我在想这样的事情:
but is there an automatic way to do the same thing? I was thinking something like:
h1{ list-style-image: url('bullet.png'); }
但这似乎只适用于 <ul> 元素.我真的不想在 <h1> 元素之前的任何地方粘贴 <span> 元素.有什么想法吗?
but that only seems to work with <ul> elements. I really don't want to have to paste the <span> element everywhere before the <h1> element. Any ideas?
推荐答案
虽然您可以使用 :before 伪选择器来添加-"或?"元素前面的字符,它并没有真正让你的元素表现得像一个要点.你的元素可能看起来像一个要点,但这只是一个肮脏的黑客,真的,应该避免!
While you can use a :before pseudo-selector to add a "-" or "?" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!
要使您的元素 (1) 看起来像一个项目符号点并且 (2) 行为像一个项目符号点,您应该设置 display、list-style-type 和该元素的 list-style-position 属性.
To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display, list-style-type and list-style-position attributes of that element.
h1 { display: list-item; /* This has to be "list-item" */ list-style-type: disc; /* See http://www.51sjk.com/Upload/Articles/1/0/332/332275_20221020143717816.jpg */ list-style-position: inside; /* See http://www.51sjk.com/Upload/Articles/1/0/332/332275_20221020143719307.jpg */ }
<h1>My H1 text here</h1>
http://jsfiddle.net/L15a53cb/