Question

我尝试应用文本缩进技术（show pseudo element but not parent element）将文本隐藏到父容器中，只显示添加的内容进入伪元素。

我的标记是这样的：

<a href="" class="icon">@</a>

但它也可能没有专门的文字内容：

<a href="" class="icon"><img src="pic.jpg" /></a>

<a href="" class="icon"><div>Some text in a block with its own <element>, <img src="img.jpg" /> or CSS styling</div></a>

然后是CSS：

.icon {
    position: relative !important;
    overflow: hidden !important;
    text-indent: -100% !important;
    white-space: nowrap !important;
}

.icon:before {
    position: absolute;
    right: 0;
    content: "\xe000";
}

（！important 子句是因为图标应该优先于元素内容中的任何内容。）

问题在于：

容器移动，但仍然可见，而我想完全隐藏它。
更改容器和伪元素的 text-indent 更改。

我正在 Firefox 39.0 进行测试。

我想念什么？

PS - 我显然不想将文本的颜色更改为容器以隐藏它。

Answer 1

文字缩进与展示block或inline-block

一起使用

＆＃13;

    .icon {
        position: relative;
        overflow: hidden;
        text-indent: -100%;
        white-space: nowrap;
        display: inline-block;
    }

    .icon:before {
        position: absolute;
        left: 0;
        content: "\xe000";
        text-indent: 0;
    }

＆＃13;

<a  class="icon">@</a>

＆＃13;

或者在这种情况下，您可以使用font-size而不是text-indent

＆＃13;

.icon {
  font-size: 0;
}

.icon:before {
  content: "test";
  font-size: 16px;
}

＆＃13;

<a href="" class="icon">@</a>

＆＃13;

使用text-indent

1 个答案: