我可以使用 CSS 为任何元素添加项目符号吗?

2022-01-10 00:00:00 css-selectors html-lists html css listitem

很简单的问题，但我不确定是否可能.我想在所有 <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 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type     */
    list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}

<h1>My H1 text here</h1>

http://jsfiddle.net/L15a53cb/

相关文章