html - css中的动态面包屑位置

Question

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

fiddle代码是这样的

<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

使用伪元素和 last-child。