Question

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

请参阅下面的代码段。

任何人都可以帮助我如何将背景图像和文字整齐地排列在一起吗？

非常感谢你!!

大卫

.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>

如何在'background-image'旁边的伪元素'content'上添加边距或填充

1 个答案: