如何在“背景图像”旁边的伪元素“内容”上添加边距或填充

Question

我正在尝试在复选框旁边放置一个图标（=背景图片）和文本。我通过复选框右侧的前伪元素 15px 添加了图像和文本，这是背景图像出现的位置。不幸的是，文本（=内容）从背景图像的位置开始，因此它们重叠。我试图通过在“内容”中添加空格来稍微移动文本，但 \0020 只能工作一次。

请看我下面的sn-p。

谁能帮助我如何将背景图像和文本整齐地对齐？

非常感谢您！

大卫

.subcategory1::before {
    content: "\0020 \0020 Cardio Entertainment";
    background-image: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png) !important;
    background-repeat: no-repeat !important;
    padding-left: 10px;
    background-size: 15px;
    position: relative;
    left: 15px;
    white-space: nowrap; /* avoid line breaks in tool tip */

}

<span class="subcategory1"></span>

Answer 1

如果需要，只需调整填充和背景位置：

.subcategory1::before {
  content: "Cardio Entertainment";
  background-image: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png);
  background-repeat: no-repeat ;
  background-position:0 1px;
  padding-left: 18px;
  background-size: 15px;
  position: relative;
  white-space: nowrap;
}

<span class="subcategory1"></span>