Replacing a text block

Question

I have a question here Replacing an image (in an <img /> tag) using css

about image replacing and now I have another wonder about text

I have the following code

<div class="A">
<a class="B" href="#">Learn more</a>
</div>

In the media query css, I would like to not display the text anymore, what should I do in this case ?

.A a .B
{

}

what have you tried? is it acceptable to hide the element itself, or does the element need to remain visible (e.g., is there a background image applied that you want to show? — jackwanders, Aug 27 '12 at 14:20

score 0 · Answer 1 · answered Aug 27 '12 at 14:18

0

Try this:

.A a.B
{
    text-indent:-9999px;
}

answered Aug 27 '12 at 14:18

Billy Moat

20,792
7
45
37

score 0 · Answer 2 · answered Aug 27 '12 at 14:19

0

You have a space between the a and .B, which means the css parser is looking for a .B INSIDE an tag.

Your code should look like this:

.A a.B
{
    text-indent:-999em;
}

answered Aug 27 '12 at 14:19

Kostia

6,284
1
18
15

score 0 · Answer 3 · answered Aug 27 '12 at 14:22

0

You have a space between the a and .B this means any element with class B inside an a element.

I guess what you meant is .A a.B

.A a.B
{
  display:none;
}

answered Aug 27 '12 at 14:22

Clyde Lobo

9,126
7
34
61

score 0 · Answer 4 · answered Aug 27 '12 at 14:29

The new way to ident is not using negative indent (since it creates a big box that is rendered by the browser and causes drop in performance) is to use the Kellum Method, see zeldman.com, like so:

.A a.B {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

score 0 · Answer 5 · answered Jul 29 '22 at 16:28

0

Try this css code

.A > a.B{display:none}
.A > a.B::after{content:'this is replace text'}

answered Jul 29 '22 at 16:28

Musawar ahmed

63
5

Replacing a text block

5 Answers5