我能使用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> 元素。我真的不想在每个 <h1> 元素之前粘贴 <span> 元素。有什么建议吗？

- Sablefoste

Answer 1

尽管您可以使用 :before 伪选择器在您的元素前面添加 "-" 或 "•" 字符，但这并不能使您的元素像项目符号一样运作。您的元素可能看起来像一个项目符号，但实际上这只是一个不太好的技巧，应该避免使用！

要让您的元素既有 (1) 看起来像项目符号又能 (2) 表现出项目符号的行为，您应该将该元素的 display 设置为 list-item。此外，您还可以设置 list-style-type (默认值：disc) 和 list-style-position (默认值：outside) 属性以修改列表项的行为 / 外观。

如果您的元素跨越多行，则如果您希望所有行都与项目符号右对齐，list-style-position 应该是默认值 outside。在这种情况下，您可能看不到实际的项目符号，因为它会在元素内容的左侧。如果出现这种情况，您可以添加左边距以将元素内容向右移动，这样就可以显示项目符号了。

---

示例1

h1 {
    display: list-item; /* This has to be "list-item"                                          */
    margin-left : 1em;  /* If you use default list-style-position 'outside', you may need this */
}

<h1>
  Your H1 text should go here. If it consists of multiple
  lines, the left alignment of all lines is the same.
</h1>
<h1>
  Here's another item.
</h1>

示例2

h2 {
    display: list-item;          /* This has to be "list-item"                                               */
    list-style-type: square;     /* 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 */
}

<h2>
  Your H2 text should go here.
</h2>
<h2>
  Note that, if you have multiple lines, only the first 
  line is aligned to the right of the bullet point when
  using list-style-position 'inside'. Subsequent lines
  are left aligned with the left of the bullet point.
</h2>

- John Slegers

---

有趣且很好的观点。我已经通过vertical-align和padding-right来实现了这一点，但我喜欢你的语义方法。+1！ - Sablefoste

这是比使用伪元素更清晰的方法。+1 - sol

如果这个功能可以适用于多行，而不是强制将它们合并成一行，那就太好了。 - Cybernetic

@Cybernetic：你是什么意思？能否详细说明一下？ - John Slegers

@Cybernetic：我想我明白你的意思了，并更新了我的答案。 - John Slegers

Answer 2

你可以做类似这样的事情：

h1:before {
    content:"• ";
}

查看 Fiddle:

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

- sinisake

---

但是这适用于图像吗？我尝试编辑您的fiddle，但似乎它不能与背景图像一起使用。 - Sablefoste

你可以很容易地添加背景图片...但是，为什么要这样做呢？你可以从CSS中获得非常好的圆点：http://jsfiddle.net/6kt8jhfo/1/ - sinisake

我尝试过，但在更改后忘记将“background”更改为“content”，结果它起作用了！我想获取图片，以在我的网站上推广自定义品牌。感谢您提供的解决方案！ - Sablefoste

你也可以使用 content: "\2022";，这是代表圆点符号的十六进制代码。记得添加类似于 margin-right: 1em; 这样的内容，以便为其提供良好的间距。 - Matt

我喜欢通过类似于 h1 {text-indent: -15px; padding-left: 20px;} 的方式来考虑换行文本的缩进，可以根据需要调整数值。 - Arvo Bowen

Answer 3

你可以使用伪选择器:before在标签之前添加任何想要的内容。

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

- AleshaOleg

Answer 4

给段落或任何元素命名一个类名，并应用以下代码（我已经将类名命名为bullet）：

.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}

- shekhar677

Answer 5

这样的代码应该可以工作

h1, h2, h3 {
  background: url("the image link goes here") 0 center no-repeat;
  padding-left: 15px; /* change this to fit your needs */
}

- Ben

Answer 6

如果你想要调整点的大小、颜色和位置，你可以这样做:

 .bullet:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    background-color: #29cf00;
    vertical-align: middle;
}

- Vince Verhoeven

Answer 7

使用 before CSS 创建项目符号的非常简单的方法是利用字体族...这样就不需要包含任何图形等。

以下是类代码：

.SomeClass:before {
  font-family: "Webdings";
   content: "=  ";

{

- Who Knows

Answer 8

list-style-type 仅适用于 ul。 您可以使用带有伪元素 :before 的 <h1 class="bullet">。

- mwl

Answer 9

不行，list-style和list-style-image只适用于ul和ol标签，你必须回到你的第一种方法或使用js来实现。

http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/cssref/pr_list-style-type.asp

- Ahmad

---

不仅限于 ul 和 ol。就像 @John Slegers 在他的回答中提到的，任何具有 display: list-item 属性的元素也可以使用 list-style 样式。 - Asuka165

Answer 10

只需使用<p>&bull; </p>在单词前创建一个点

- Rudy Pramana

---

这并不能回答我的问题。我希望CSS可以起到更大的作用。否则，每个项目符号都需要进行大量编辑。这种解决方案与我的原始计划类似，即在符号前面使用<span class='bullet'></span>。最好的建议是@John的解决方案（我已接受）。 - Sablefoste