如何将标题放在标题元素旁边作为背景图像

Question

我正在使用CSS并试图在标题中看到一个子弹点：

这是我想要的确切图像。

我做了什么：

h1,h2,h3 {
    background-image: url("the image link goes here");
}

任何人都有任何想法，我试过移动它和东西，但它只是没有发生。欢呼声。

Answer 1

您也应该设置background-position以及标题元素的左侧填充以将文本推向右侧：

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

请注意，我使用background属性作为简写。

您也可以通过使用::before伪元素来创建矩形并在标题内定位，如下所示：

h1:before,
h2:before,
h3:before {
  content: '■ ';
    position: relative;
    bottom: .1em;
    color: #666;
}

<强> WORKING DEMO