Tailwind pseudo-element after inserting content image

Issue

I wanna ask something about pseudo-element using tailwind, so before going through into my main problem I wanna show my code using 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%;
}

and the result is like this:

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:

Solution

You can use item-center class here and use text-black to make them look similar. You have to use custom fonts as popins is not supported by default. You can refer here

Below is my code

https://play.tailwindcss.com/0wks3noHUe

Answered By - Mohit Maroliya B17CS036