0

There is a label with pseudo circle:

<label _ngcontent-bfw-c43="" class="block text-black font-medium before:inline-block before:w-2 before:h-2 before:mr-5 before:align-middle before:bg-red-500 before:rounded-full">Name of company</label>

Problem is that if text is not fit by with it breakes to the next line.

::before has margin-left. How to break the text with this margin?

enter image description here

1 Answers1

1

Is this what you mean? test it and see :

I inserted the label inside a div so I can make that circle outside the text so I can control the circle's position absolute without moving the text with it.

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

  <div class="before:absolute before:top-2 before:left-1 ml-6
      text-black font-medium before:inline-block before:w-2 before:h-2 
      before:mr-5 before:align-middle before:bg-red-500 before:rounded-full">
      <label _ngcontent-bfw-c43="sdfds" class=" ">


      Name of companyName of companyName of companyName of companyName of companyName of company
</label>
  </div>

</div>
Dhaifallah
  • 1,437
  • 1
  • 5
  • 19