图像和文本作为内容属性的值

Question

我正在使用该content:属性为伪元素提供内容。

我知道我可以给它一个带有content:url(image.svg);内容的图像值和带有内容的文本：“Hello”;`，但是如何给出图像和文本值。显示文本左侧的图像？

Answer 1

对于稍后寻找解决方案的人，只需将 url() 和“String”（中间有一个空格）添加到 before:: 伪元素的内容中即可。

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " EXTRA TEXT AFTER THE ICON: ";
}

<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS 文档位于： https: //developer.mozilla.org/en-US/docs/Web/CSS/content#Image_combined_with_text

作为替代方案，您可以使用内容和背景组合：

a::before {
      content:" EXTRA TEXT AFTER THE ICON: ";
      background: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") no-repeat center left;
      padding-left: 35px;
    }

<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>