I have a bunch of icons and one of them will be perfect as an icon next to my WordPress site title. Unfortunately, the site title is not the most important text on the page and is shown as a grey color. The icons are all black and white. How can I get a grey icon without making a new image?
CSS pseudo-elements to the rescue. Here’s the style for the logo element of the site (which is the title and subtitle):
This let’s me set the opacity of the background image without altering the opacity of the entire site title and subtitle. Of course, that would have worked fine and I could have just changed the text to be black and applied an overall opacity. But this is more interesting and will be useful when I change the title color to something more fun.