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?