html - 在::before 和元素自身之间添加边距，仅当显示元素自身时

Question

我一直在努力解决这个问题。例如，这段代码；

<span class="icon">save</span> lorem ipsum
<span class="icon"><span class="screenreader">edit</span></span> lorem ipsum

使用::before 我将图标添加到跨度。那里没有问题。现在我想在图标和“标签”之间添加边距。但前提是有标签显示。例如，“编辑”标签是隐藏的，并且只存在于屏幕阅读器的代码中。

举个例子胜过千言万语； http://codepen.io/anon/pen/jbWwbb

请注意第二行 lorem ipsum 之前有多余的边距。如何在不向 html 添加额外标记的情况下解决此问题？

谢谢!

Answer 1

你可以简单的在伪元素内容后加一个空格，去掉margin-right。这将起作用，因为浏览器会折叠多个空间并仅呈现一个空间。

.icon:before {
    content: '❤ '; /* space after heart will make a trick */
}

因此在这两种情况下它都会按预期呈现。

.screenreader {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.icon {
    color: red;
}
.icon:before {
    content: '❤ ';
}

<span class="icon">save</span> lorem ipsum
<br>
<span class="icon"><span class="screenreader">edit</span></span> lorem ipsum