CODEWITHSUNDEEP
htmlcsshidden
gwmbox
gwmbox

Reputation: 167

CSS How to hide text after a span

The following is some code from a template I am developing for Joomla. The code below is the output generated.

Is it possible to hide text within an a tag after a closing span using css? For example how do I get the words Print, Email and Edit to be hidden?

<ul class="icons">
  <li class="print-icon">
    <a href="#" onclick="window.print();return false;"><span class="icon-print"></span>Print</a>
  </li>
  <li class="email-icon">
    <a href="#email"><span class="icon-envelope"></span>Email</a>
  </li>
  <li class="edit-icon">
    <a href="#edit"><span class="icon-edit"></span>Edit</a>
  </li>
</ul>

Thanks for your help

Upvotes: 2

Views: 7401

Answers (3)

Brett East
Brett East

Reputation: 4322

You might be able to try setting your anchor tags to inline block and giving them the width of your icon and then setting overflow to hidden:

.edit-icon a, .email-icon a, .print-icon a { display: inline-block; width: 16px; overflow: hidden; }

Here's a little jsfiddle

Upvotes: 0

Longblog
Longblog

Reputation: 849

You can just leave the words out of the html.

<a href="#email"><span class="icon-envelope"></span>Email</a>

becomes

<a href="#email"><span class="icon-envelope"></span></a>

Upvotes: -1

Josh Crozier
Josh Crozier

Reputation: 240878

Since you can't actually select text nodes directly, one work-around would be to set the font-size of the parent element to 0. Then reset the font-size for those desired span elements. In doing so, only the span elements should appear, and the adjacent text nodes should effectively be hidden.

Example Here

.icons li a {
    font-size: 0;
}
.icons li a span {
    font-size: 16px;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="icons">
  <li class="print-icon">
    <a href="#" onclick="window.print();return false;"><span class="fa fa-print"></span>Print</a>
  </li>
  <li class="email-icon">
    <a href="#email"><span class="fa fa-envelope"></span>Email</a>
  </li>
  <li class="edit-icon">
    <a href="#edit"><span class="fa fa-edit"></span>Edit</a>
  </li>
</ul>

Upvotes: 3

Related Questions