[SOLVED] How to change the value of text in <p> tag when page resized

How to change the value of text in <p> tag when page resized

I want to change the Value of <p> tag "text" when the page resize (shrink or grow).

<div className='flex sm:bg-red-500/40 after:sm:content-["I am sm Size"]'>
  This is a Test
</div>

However, when I resize the page, it doesn't work.

Solution

Solution #1

Using only CSS, you can create two divs and set the width range in which they are visible.

<script src="https://cdn.tailwindcss.com"></script>

<div>
  <p class="sm:hidden">This is a Test</p>
  <p class="hidden sm:block">I am sm Size</p>
</div>

Solution #2

You can fill the content of the div using ::before or ::after pseudo-elements.

Pseudo-elements - MDN Docs
Setting a pseudo-element's content - TailwindCSS Docs

<script src="https://cdn.tailwindcss.com"></script>

<div class="after:content-['This_is_a_Test'] sm:after:content-['I_am_sm_Size']">
</div>