Format space around separator in breadcrumb

Hello!

In TSF 5.0.2, we increased the specificity of the CSS to resolve a widespread issue. This, in turn, requires theme developers to be even more specific, such as annotating the wrapper block such as .site-header, or even the entire body (but that is not recommended):

.site-header nav.tsf-breadcrumb ol li:not(:last-child)::after {
  margin-inline-start: 0.5ch;
  margin-inline-end: 0.5ch;
}

Alternatively, you can use a PHP filter. To mitigate a crash if the selector disappears or changes, we forgo using array_push() and write directly to the variable instead.

To prevent repeating the selector, I created a pointer. This pointer causes anything we write to the $sep_css pointer variable to be written to the primary $css variable’s separator index.

add_filter(
	'the_seo_framework_breadcrumb_shortcode_css',
	function ( $css, $class ) {

		// Create a pointer so we do not have to write the long selector repeatedly.
		$sep_css = &$css[ "nav.$class ol li:not(:last-child)::after" ];

		$sep_css[] = 'margin-inline-end:.5ch';
		$sep_css[] = 'margin-inline-start:.5ch';

		return $css;
	},
	10,
	2,
);

I hope this helps! Have a lovely day ??

Thank you, Sybre. I don’t quite get the PHP filter, but luckily your CSS solution worked. Actually, mine did too, after I fixed an editing error in the stylesheet ?? I appreciate the help.