Question

我想在ul列表项中显示每个国家/地区的每个标志。

这是我试过的代码

ul li {
    	list-style: none;
    	height: 34px; line-height: 34px;
    	padding-left: 46px;
    }

    ul li::before {
    	position: absolute;
    	background-image: url(attr(flag));
        background-size: 30px;
        background-repeat: no-repeat;
        left: 10px; margin-top: 6px;
        width: 32px;
        height: 32px;
        content:"";
    }

<ul class="select-box" id="slcCountry">
    <li flag="https://restcountries.eu/data/afg.svg">AFG</li>
    <li flag="https://restcountries.eu/data/ala.svg">ALA</li>
    <li flag="https://restcountries.eu/data/alb.svg">ALB</li>
</ul>

它对我不起作用。我怎么解决。

Answer 1

flag不是有效属性，您可以使用内联样式定位列表项并以该方式定位元素。在这种情况下不需要伪元素。这应该可以解决问题。

<ul class="select-box" id="slcCountry">
    <li style="background-image: url('https://restcountries.eu/data/afg.svg');">AFG</li>
    <li style="background-image: url('https://restcountries.eu/data/ala.svg');">ALA</li>
    <li style="background-image: url('https://restcountries.eu/data/alb.svg');">ALB</li>
</ul>

ul li {
    background-image: none; /* used as a fallback */
    background-repeat: no-repeat;
    background-position: top left;
    list-style: none;
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 46px;
}

Answer 2

您可以添加

等图片代码

<ul class="select-box" id="slcCountry">
    <li><img src="https://restcountries.eu/data/afg.svg"/>AFG</li>
    <li><img src="https://restcountries.eu/data/ala.svg"/>ALA</li>
    <li><img src="https://restcountries.eu/data/alb.svg"/>ALB</li>
</ul>

ul li {
    list-style: none;
    height: 34px; line-height: 34px;
    padding-left: 46px;
}

ul li img {
    position: absolute;
    left: 10px; margin-top: 6px;
    width: 32px;
    height: 32px;
}

Answer 3

实际上attr()仅适用于css伪元素content和:before的{{1}}属性。

正如MDN所说：

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

因此将它与:after一起使用会使其无效......如果不允许更改html部分，则需要添加一些jQuery。

background-image

$(".select-box li").each(function() {
  $(this).append("<img src=" + $(this).attr("flag") + ">")
})

ul li {
  list-style: none;
  height: 34px;
  line-height: 34px;
  padding-left: 46px;
  position: relative;
}

ul li img {
  max-width: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

Answer 4

如果你想继续使用伪元素，那么使用CSS变量的另一个简单想法是：

ul li {
  list-style: none;
  height: 34px;
  line-height: 34px;
  padding-left: 46px;
}

ul li::before {
  position: absolute;
  background-image: var(--i);
  background-size: 30px;
  background-repeat: no-repeat;
  left: 10px;
  margin-top: 6px;
  width: 32px;
  height: 32px;
  content: "";
}

<ul class="select-box" id="slcCountry">
  <li style="--i:url(https://restcountries.eu/data/afg.svg)">AFG</li>
  <li style="--i:url(https://restcountries.eu/data/ala.svg)">ALA</li>
  <li style="--i:url(https://restcountries.eu/data/alb.svg)">ALB</li>
</ul>

HTML ul列表项，为每个li使用属性传递图像src

4 个答案: