Html 无嵌套跨距的纯CSS3图标

我正在创建纯CSS3图标。我现在的做法要求我在某些情况下有多个嵌套跨距级别

在大多数情况下，主跨距用于图标的背景。然后我使用：before和：after插入更多元素。 如果我需要两个以上的附加元素，我需要在父元素中添加更多的跨距，我还可以填充并插入：before和：after

该方法工作得很好，但如果我能消除如下所示的HTML，那就太好了：

<span class="btn"><span></span><span></span></span>

这是一个如此复杂的图标，我认为没有比你的方式更好的方式了。顺便说一句，看起来不错。也许可以试试这个链接：-@PraveenKumar:谢谢：）@Raziasultana:谢谢你的链接。这些看起来不错，但使用的方法基本上与我所知道的相同。这些图标恰好不需要任何额外的跨距。顺便说一句，我注意到我忽略了使用softwarebutton的实际跨度内容，因此可能会删除其中一个。我认为创建DOM节点进行样式设置是一个糟糕的做法。对我来说，您的挑战听起来非常适合SVG，它可以以各种方式（背景图像、内容前后、甚至内联）应用于单个语义正确的

按钮
元素。这是一个如此复杂的图标，我不认为是否有比您的方式更好的方式。顺便说一句，看起来不错。也许可以试试这个链接：-@PraveenKumar:谢谢：）@Raziasultana:谢谢你的链接。这些看起来不错，但使用的方法基本上与我所知道的相同。这些图标恰好不需要任何额外的跨距。顺便说一句，我注意到我忽略了使用softwarebutton的实际跨度内容，因此可能会删除其中一个。我认为创建DOM节点进行样式设置是一个糟糕的做法。对我来说，您的挑战听起来非常适合SVG，然后可以通过各种方式（背景图像，：：内容之前/之后，甚至内联）将SVG应用于单个语义正确的
按钮
元素。