I am looking for a way to highlight the trailing space that might be included for an html element. Here, “highlight” has a broad meaning. It means adding some visual hints (e.g., underline, bounding box, background color) so that people can easily see that a trailing space is in a browser view.

<p>ABC   </p>

For example, for the above html code, if you use mouse to select the element, you will see a trailing space is added to “ABC”. I want to make this easy to see so that I don’t have to manually select the text to know there is a trailing text.

<p style="background:#ff0000;">p   </p>

I tried something like the above. But it will add the background color all the way to the right of the browser window.

How do I solve this problem?