0

How to use ::before circle for text in tailwind?

I have a text:

enter image description here

How to set red circle as ::before with padding?

  • You can not do that with tailwind' classes. Read [this](https://tailwindcss.com/docs/content) article. But if you want you can add custom class to your main.css. ``` @layer components { .card::before { content: ''; } } ``` In your html ```
    ...
    ```     – Yusuf İlker Oğuz Mar 22 '22 at 22:16

1 Answers1

0

I'm not sure if this is the best way but take a look here

<script src="https://cdn.tailwindcss.com"></script>
<div class='h-screen w-screen p-4'>

  <h1 class='before:inline-block before:w-3 before:h-3 before:mr-4
           before:bg-red-500 before:rounded-full '>Hello</h1>
  <div class="h-[400px]  bg-red-400 w-[5px] ml-[3.5px] "></div>

</div>
Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
  • What if width of line is changed how auto calculate center of line with circle by vertical? –  Mar 22 '22 at 22:49
  • @Mamkad I'm not sure if that's possible, coz why would you change the width of the line manually and if you must do then change the `mr` value of the `before` too. – Dhaifallah Mar 22 '22 at 23:02