显示伪元素，但不显示父元素 [英] show pseudo element but not parent element

问题描述

您好，我有一个包含如下文字的列表项：

Hi I have a list item containing text like this:

<li>Search</li>

，我想使用字体awesome显示图标

and I want to display an icon using font awesome

li:before {
  content: "\f002";
}

我不能删除搜索文本它是从Drupal CMS，标记和类名称生成），但我想隐藏搜索文本，但显示伪元素（搜索图标）。我如何做到这一点？通常我要隐藏的文本只是去：

I don't have the ability to just remove the "Search" text (it is being generated from a Drupal CMS, as is the markup and class names), but I want to hide the Search text, but show the pseudo element (the search icon). How do I do this? Normally what I would do to hide the text is just go:

li {
  text-indent: -1000px;
  overflow: hidden;
}

但会隐藏伪元素

推荐答案

您可以坚持使用文本缩进方法（或更好的 Kellum Method ），并对伪元素使用CSS定位：

You can stick to the "text-indent" method (or better the "Kellum Method") and use CSS positioning for the pseudo element:

li {
display:block;
position:relative;
text-indent: -100%;
white-space: nowrap;
overflow: hidden;
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}

http://jsfiddle.net/Fiddel/aopteq8m/

这篇关于显示伪元素，但不显示父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！