I am working on a webpage project that changes it’s text based on a js script. I want to know how to add a slightly grey rectangle around the text that dynamically sizes with the text, and disappears when there is no text.
Hi, I think CSS can be used to accomplish your need.
By applying a border to the element, setting the width to max-content so the div size is determined by its text content and then use the :empty pseudo-class to remove the border when the element is empty.
border: 2px solid grey;
// remove border when the element is empty
Let me know if it needs further explaining or help