html - 我可以使用 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 伪选择器在您的元素前面添加“-”或“•”字符，但它并不能真正使您的元素表现得像一个要点.您的元素可能看起来像一个要点，但实际上这只是一个肮脏的 hack，应该避免!

要使您的元素 (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>