:last-of-type but only if it meets other conditions as well

.gallery-item:nth-of-type(3n+2):last-of-type

I was working on a gallery with rows of 3 items per row for which the markup contained <br> after every third .gallery-item and the CSS used floats. It didn’t look how I wanted it to and needed to change it anyway, so I decided to also get rid of the floats and break-tags and use display: flex instead.

Read more:last-of-type but only if it meets other conditions as well

Transition on hover

What: If you put a transition on the :hover instead of on the :link, it only transitions one way. If you put the transition on the :link, it will transition each way. Usually this is exactly what you want because once you move the cursor off the link, the effect will be gradually transitioned back instead of being removed abruptly.


Spacing in CSS pseudo-element content

A bit of an abstract title but I’m basically taking about:

h4::after {
    content: "";
}

If you have just text in the content property, you can adjust spacing with the letter-spacing and/or word-spacing properties in CSS. Letter-spacing would even work if you have just icons but I had a combination of three icons and a word, and the letter-spacing I wanted between the icons pulled the letters of the word too far apart. You can’t use html in the content property of a pseudo-element like ::before or :: after, so &nbsp; is out.

Read moreSpacing in CSS pseudo-element content

Images and ::before & ::after

I learned today that the pseudo-elements ::before and ::after don’t work with the img-element. As I went looking I found out that the CSS spec is very unclear on this. It has to do with the fact that <img> doesn’t have its actual content on the page/in the HTML, it pulls it in from elsewhere. This makes it a replaced element. Form elements are also replaced elements. It is also an empty element, like <br> and <hr>.

Rule of thumb (for now) seems to be that empty elements can’t have ::before and ::after applied with the exception of <hr>.
Other empty elements with which ::before and ::after wont work (may) include form elements and <br>.


Photo by Jack Krasky on Unsplash