She always was. I just chose to start publicizing the crazy stuff she destroyed in my house!
In September I will be presenting a talk at BlendConf 2014 in Charlotte, North Carolina! I have never been there, so it will be quite the vacation for me. I’m super excited and humbled to be chosen to present among many talented people in the tech and design industry. I can’t wait to see what everyone will be presenting about!
If you are in the Charlotte area or are interested in making the trip to the conference, I have my personal discount code to share with you to receive 10% off the ticket price!
Use rachelisfabulous at checkout!
We have a lot of images on our site and make use of the
img tag heavily to load up our assets instead of using
divs and setting a background image. What I learned and didn’t realize about until today, is that image tags are something called “replaced elements.”
What is a replaced element?
A replaced element is something that has its appearance controlled by an external resource. So what does that mean? It could mean that its behavior and appearance is controlled by the browser itself. This is why other replaced elements like
input all look different depending on which browser you use because how those elements are displayed is up to the browser.
On these replaced elements, pseudo elements like :before and :after don’t work, andÂ aren’t meant to work due to their inherent responsibility and purpose. This behavior is directly mentioned in the spec. Too bad I didn’t realize it until I had already spent a few days wondering why my style works on a
div but I couldn’t find it when I tried swapping it to an
Note.Â This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
The workaround for to get my desired behavior is not difficult to achieve at all once you realize you can’t manipulate the
img tag directly. All you need to do is wrap your image (or other replace element) in a block element like a
div and then you can use the :before and :after pseudo elements to their full capacity.
I hope this information helps someone else out there who may not have known about this little piece of behavior in HTML!