Question

我一直试图解决这个问题。例如，这段代码;

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

使用::之前我向span添加一个图标。没有问题。现在我想在图标和'标签'之间添加一个边距。但只有显示标签。例如，“编辑”标签是隐藏的，纯粹是在屏幕阅读器的代码中。

一个例子说千言万语; http://codepen.io/anon/pen/jbWwbb

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

感谢名单！

Answer 1

您可以在伪元素内容之后添加一个空格并删除margin-right。这将起作用，因为浏览器会折叠多个空格并仅呈现一个空格。

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

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

＆＃13;

.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: '❤ ';
}

＆＃13;

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

＆＃13;

仅在显示元素self时，在:: before和element self之间添加边距

1 个答案: