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

Question

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

我知道我可以用 content:url(image.svg); 给它一个图像值，用 content:"Hello";` 给它一个图像值，但是我如何给它一个图像和一个文本值(value)。显示文本左侧的图像？

Answer 1

对于以后寻找解决方案的任何人，只需在 before::伪元素的内容中添加 url() 和“String”，中间加一个空格即可。

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>