{{ 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).

See the Pen No pipes on new lines with mix-blend-mode: difference by David McCormick (@davidpmccormick) on CodePen.

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