css中的动态面包屑位置

Question

我有面包屑。可以看到演示链接here。我希望我的面包屑看起来与引用的图像完全一样。

小提琴代码就像这样

<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">

<span><a class="home" href="http://localhost/WebSites/Mkratom/Website">Home</a></span>
<span><a href="http://localhost/WebSites/Mkratom/Website/shop/">Shop</a> </span>  
<span><a href="http://localhost/WebSites/Mkratom/Website/product-category/fictation/">Fictationssss</a></span> 
<span>Moon Shiningsssssss</span>
</nav>

请注意，我引用的图像是动态图像，因此我可以放置任意长度的文本。文本长度可以在不同的地方变化，所以请记住这一点。 任何帮助和建议都将非常感激。

感谢。

更新

抱歉，我无法更改标记，因为它来自数据库。

Answer 1

从前面给出的提示:)，这是一种可能性

http://codepen.io/gcyrillus/pen/Eyrjv

使用伪元素和最后一个孩子。