css Question posted in
Some basic documentation can be found here.

Css – How to change the value of text?

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.

Tags:

2

Answers


  1. 0

    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.

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

<div class="after:content-['This_is_a_Test'] sm:after:content-['I_am_sm_Size']">
</div>
    Login or Signup to reply.
  2. 0

    Have you tried adding the "resize" Event using JavaScript.

    You can use the following code to add it after getting the element.

    addEventListener("resize", (event) => {});

onresize = (event) => {};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search