How to display a ::before element inline (Side by side with the element's text)

Question

I'm trying to skin Wikipedia with just CSS. I've gotten stuck trying to show the "Watch" and "Unwatch" text on Wikipedia pages.

If you inspect element the star icon on the top right of this page:

you'll see that the a tag has text content (Either "Watch" or "Unwatch").

I'd like to see that text.

I've tried:

#ca-watch.icon a::before {
    display: inline-block !important;
}

.vector-menu-tabs .mw-watchlink.icon a {
    width: 10em;
}

However, the text content still renders under the star icon. Does anyone have an idea of what I'm doing wrong?

Thank you!

user_2630825 · Answer

There are a flurry of addition CSS settings that are influencing the text displaying below.

On the A element:

the width isn't wide enough to show the text and the icon
the overflow being set to hidden is why you don't see the "watch" text
(the padding is pushing is also pushing the "watch" text down but is also how the tab background is being displayed)

On the pseudo element (:before):

Hope this helps. Happy coding.