DEV Community

Justin Stout
Justin Stout

Posted on • Updated on

Styling alt attribute in img tag

Good day DEV community,

I want to share something that grabbed my curiosity. I was working on a project for freecodecamp.com and testing how it looked in Firefox when I noticed that the alternative text was being displayed in place of the Twitter icon. I thought it was odd since it was working fine in the other browsers. Anyway I google searched for another source for the Twitter logo thinking, maybe it’s an image format compatibility issue. While I’m still not sure what’s causing the problem, I think the icon I’m using now looks better than the original one I was using, so I’m happy with that. Now for the item that got my curiosity, the alternative text. I started to wonder if it could be styled and discovered that, YES, it can!

Just to be clear, this is nothing new. I just recently learned about this trick and while it does have its limitations, it’s still pretty cool as you can see in the Codepen I have below:

For more information, follow the Google search link below:

https://www.google.com/search?q=styling+alt+text+css&rlz=1CAOTWH_enUS779US780&oq=stylin&aqs=chrome.0.35i39j0j69i57j35i39j46j0l2j69i65.1784j0j7&sourceid=chrome&ie=UTF-8

Discussion (0)