Tailwind pseudo-element after inserting content image-CodePudding

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 >Location</label>

And the result:

CodePudding user response：

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