我可以使用 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> 元素。有什么想法吗？

Answer 1

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

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

Answer 2

你可以这样做：

h1:before {
    content:"• ";
}

参见Fiddle：

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

Answer 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

Answer 4

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

一起使用

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 */
}

Answer 6

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

Answer 7

随便用 <p>• </p>在您的单词前面创建一个点

Answer 8

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

这里是 class 代码：

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

{

Answer 9

为段落或任何元素命名 class 并应用以下代码（我已将 class 命名为 bullet）：

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

Answer 10

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

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

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

Can I use CSS to add a bullet point to any element?

html

css

css-selectors

html-lists

listitem

示例 1

示例 2