show pseudo element but not parent element

问题

Hi I have a list item containing text like this:

<li>Search</li>

and I want to display an icon using font awesome

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

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;
}

but that will hide the pseudo element as well

回答1:

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/

回答2:

A bit late to the party, but you could always change the font-size of the li to 0, and change the font-size of the icon back to the original font-size. Like this:

li {
    font-size: 0;
}

li:after {
    font-size: 1em;
}

回答3:

This is pretty hacky, and don't tell anyone I did this, but jsfiddle.net/57BGV.

li {
    list-style: none;
    text-indent: -65px;
}

li:after {
    content: "Test";
    display: inline-block;
    padding-left: 80px;
}

回答4:

One way to do it would be to change the font-color to whatever the background-color is. This won't remove the text from the flow but will hide it, which is what you're asking, technically.

Assuming your background is white:

li {
    color: #FFF;
}

来源：https://stackoverflow.com/questions/25060352/show-pseudo-element-but-not-parent-element

标签

css

css3

pseudo-element