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

Question

很简单的问题,但我不确定是否可能.我想添加一个图像作为所有<h1>元素中的子弹.我知道我可以通过以下方式实现:

<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;
}

但有没有一种自动的方法来做同样的事情？我想的是:

h1{
    list-style-image: url('bullet.png');
}

但这似乎只适用于<ul>元素.我真的不想在<span>元素之前到处粘贴<h1>元素.有任何想法吗？

Answer 1

虽然您可以使用:before伪选择器在元素前添加" - "或"•"字符,但它并不能使您的元素表现得像子弹点.你的元素可能看起来像一个子弹点,但这只是一个肮脏的黑客,真的,应该避免!

为了使你的元素(1)看起来像一个子弹点,(2)表现得像一个子弹点,你应该设置 display,list-style-type以及list-style-position该元素的属性.

示例代码

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/

Answer 2

你可以这样做:

h1:before {
    content:"• ";
}

见小提琴:

http://jsfiddle.net/6kt8jhfo/6/

Answer 3

您可以使用伪选择器:before在标记之前添加任何内容.

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>