Q: How to display a ::before element inline (Side by side with the element's text) 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:
https://en.wikipedia.org/wiki/Main_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!

A: 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):

*

*the display block (which you've already overwritten)

*the positioning

Hope this helps. Happy coding.
