插入内容图像后的 Tailwind 伪元素

Question

我想问一些关于使用顺风的伪元素的问题，所以在讨论我的主要问题之前我想使用CSS

.text-location {
  display: flex;
  gap: 1.625rem;
}

.text-location::after {
  content: url('image/arrow-down-icon.svg'); <= example image
  display: inline-block;
  width: 100%;
  height: 100%;
}

结果是这样的：

it's working and nothing something wrong when I used in CSS, but when I'm going through using tailwind the content is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before and have a nice day, bellow my code:

<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full">Location</label>

And the result:

Answer 1

您可以在tailwind.config.js中定义您的内容

theme: {
    extend: {
      content: {
        'arrowDownIcon': 'url("../src/arrow-down-icon.svg")',
        'arrowUpIcon': 'url("../src/arrow-up-icon.svg")',
      },
      fontSize: {
...

您可以使用以下类名来渲染它。确保包含inline-block和width。

<label className="after:content-arrowDownIcon after:inline-block after:w-8">Learn More</label>

您还可以应用像这样的悬停状态悬停：after：content-arrowUpIcon

<label className="hover:after:content-arrowUpIcon after:content-arrowDownIcon after:content-arrowBlack after:inline-block after:w-8">Learn More</label>