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

【问题标题】：Can I use CSS to add a bullet point to any element?我可以使用 CSS 为任何元素添加项目符号吗？
【发布时间】：2015-11-09 11:13:42
【问题描述】：

很简单的问题，但我不确定是否可能。我想在所有 <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> 元素。有什么想法吗？

【问题讨论】：

标签： html css css-selectors html-lists listitem

【解决方案1】：

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

h1:before {
    content: "- "
}

&lt;h1&gt;My H1 text here&lt;/h1&gt;

【讨论】：

【解决方案2】：

你可以这样做：

h1:before {
    content:"• ";
}

见小提琴：

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

【讨论】：

但这适用于图像吗？我尝试编辑您的小提琴，但它似乎不适用于背景图像。
您可以轻松添加背景图片...但是，为什么要这样做，您可以从 css 中获得非常好的子弹：jsfiddle.net/6kt8jhfo/1
我试过了，结果忘记把background改成content了，还是可以的！我想获得图像，在我的网站上推广自定义品牌。感谢您的解决方案！
您也可以使用content: "\2022";，这是符号的十六进制代码。请务必添加 margin-right: 1em; 之类的内容以提供良好的间距。
我喜欢通过像h1 {text-indent: -15px; padding-left: 20px;} 调整值来满足您的需要来考虑换行文本以显示缩进。

【解决方案3】：

不，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

【讨论】：

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

【解决方案4】：

list-style-type 仅供ul 使用。您可以将<h1 class="bullet"> 与伪元素:before 一起使用。

【讨论】：

【解决方案5】：

这样的东西应该可以工作

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

【讨论】：

【解决方案6】：

虽然您可以使用: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 */
}

&lt;h1&gt;My H1 text here&lt;/h1&gt;

小提琴

http://jsfiddle.net/L15a53cb/

【讨论】：

很有趣，也很好。我已经通过vertical-align 和padding-right 解决了这个问题，但我在语义上喜欢你的方法。 +1！
这是一种比使用伪元素更简洁的方法。 +1
developer.mozilla.org/en-US/docs/Web/CSS/list-style-type 说你甚至可以做到list-style-type: "\1F44D"; // thumbs up sign
如果这适用于多行，而不是将它们强制为单行，那就太好了。

【解决方案7】：

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

【讨论】：

这不能解决我原来的问题。我希望 CSS 来完成繁重的工作。否则，我将对每个要点进行更多的编辑。这个解决方案类似于我最初的计划，即在子弹前面使用<span class='bullet'></span>。最好的建议是@John 的解决方案（我接受了）。

【解决方案8】：

使用之前的 css 创建项目符号的非常简单的方法是使用字体系列......这样就不需要包含任何图形等。

这是课程代码：

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

{

【讨论】：

【解决方案9】：

给段落或任何元素一个类名并应用下面的代码（我给班级命名为bullet）：

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

【讨论】：

【解决方案10】：

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

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

【讨论】：