問題描述

很簡單的問題，但我不確定是否可能.我想在所有 <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/

這篇關于我可以使用 CSS 為任何元素添加項目符號嗎?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！