Nicer Separators for Read List

I'm satisfied with a little change that I managed to enact.

In my read list, I had evolved it over time to have little separators in between the list items to mark out the different years. As at today, I have finally evolved it to exactly how I'd want it:

Here's a list of the evolutions over time that I had done:

1. The first incarnation of the separator came about as a border at the top of the last entry of the year.
2. One minor adjustment I did after that was to have the right side show a border as well to make the demarcation a little more obvious. I wasn't happy that the horizontal separator did not extend into the space where the numbers were though.
3. I added more space to the separator to make it more obvious, and was starting to get annoyed at the right border being uneven---it was heavily reliant on the vertical space taken up by the list item. I also didn't like that it was impossible to know what year the separator encompassed.
4. On a whim, I switched up the list element that I was using for the separator, and the [re-]discovery of the ::after CSS3 pseudo-element allowed me to add the year through some attribute grabbing.
5. I also remembered about the whole negative margins trick and used it to set up the separator into the form that you see in the screenshot above.

There is only one draw back from this set up---if the element anchor is used, the mini-animation from accessing it highlights the entire block which includes the separator. In theory, I could cheat with using a single span element to simulate that, but it feels a bit dirty considering that span elements shouldn't really appear as children for the ol element.

Apart from fixing the separators from my read list, I also did a little house-keeping in collapsing the style-related issues of nested cite, em, and i elements through using the :is() CSS3 pseudo-class to generate the relevant Cartesian products. So now, any nested combinations of these three primarily italicised contents are consistent: un-nested, they get italicised; the next nesting adds underline effects; the next, bold; and the final converts the text to small-caps. Superb!

Anyway, that's all I want to write for now. I'm just happy that I have put to bed one of the more annoying styling issues for a while.

Till the next update... some other time.