What: You have an unordered list and you want to turn it into an ordered one through CSS
How: You can do this with CSS 2.1 and the counter element. Yay! I love CSS.
pseudo-elements
Styling placeholder text
Not something new I learned, more something I keep forgetting over and over.
::placeholder to change how placeholders look. You’d think I’d remember something so obvious…
If it’s not working, this post over at CSS-Tricks may have some more information on why.
(Actually, what that post taught me, is that there is a difference between pseudo elements and pseudo classes!)
Photo by Vivek Sharma on Unsplash
Pretty lists!
What: Firefox 68+ and Safari 11.1+ support the pseudo-element ::marker yay! Chrome doesn’t yet, and neither do Edge or IE11. It will allow for:
li::marker {
color: #ff3399;
content: "-";
}Not just on list-items either, but also on elements with a display: list-item.
CSS-Tricks has more about this: Finally, it Will Be Easy to Change the Color of List Bullets.
Photo by Max Rovensky on Unsplash
: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.
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.
Photo by Hello I’m Nik 🇬🇧 on Unsplash
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 is out.
What: I found my solution on Stack Overflow, see link below, where someone had given a pretty list of the different spaces in CSS as a solution to a similar problem.
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