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>

Answer 2

使用:after和:before添加图片和文字。

看看这段代码：

jsFiddle

div{
    background:#999;
    width:100px;
    height:50px;
    position:relative;
}
div:after{
    content:"Text is here";
    background:#ddd;
    position:absolute;
    height:20px;
    width:100px;
    bottom:-20px;
    right:-20px;
}
div:before{
    content:url(http://lorempixel.com/20/20);
    background:#ddd;
    position:absolute;
    height:20px;
    width:20px;
    bottom:-20px;
    left:0px;
}

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

2 个答案: