{{ title }}

Preventing item separator display on new lines

{{ date | formatDate }}

• dev

{% for tag in tags %}
  {{ tag }}
{% endfor %}

If you’ve got a list of things separated by vertical lines, it tends to look wonky if that list breaks onto a new line and there’s a vertical line either at the end of first or start of the second line.

something | a | bit |
like | this

or (worse still)

something | a | bit
| like | this

Using mix-blend-mode: difference we can make them display only when absolutely-positioned :before and :after pseudo-elements are stacked on top of each other (i.e. when they’re on the same line).

I’ve since learned from Temani Afif that there are several more idiomatic ways to get the same result.