Slightly transparent dark grey box around text

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.

I have not included any code, because I have not tried anything and I do not know where to start trying.
usps tracking >showbox

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.

Code example

.element {
border: 2px solid grey;
width: max-content;
}

// remove border when the element is empty
.element:empty {
border: none
}

Let me know if it needs further explaining or help