user318197
user318197

Reputation: 333

Change the content of an anchor tag using CSS

I would like to change the content of an anchor tag using CSS. Below is the HTML of the anchor tag:

<a class="search"><img src="/search.png" id="searchImg"></a>

The anchor tag has an image in it, I would like to replace it with text using CSS. I cannot change the HTML as I do not have access to it. Can someone please help me on this? Thanks.

Upvotes: 0

Views: 11104

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

If you absolutely must do this and my comments pretty much cover why you shouldn't... it is possible but not recommended.

In order to maintain any current accessibility it seems to me that you want to hide the image visually but retain it's location and size.

Hence:

.search {
  border: 1px solid red;
  /* for visiual cue */
  position: relative;
  display: inline-block;
}
.search img {
  opacity: 0;
  /* just hide it visually but leave it in place */
  display: block;
}
.search::before {
  content: "Searching";
  position: absolute;
  /* position the pseudo-element over the image with the same dimenesions */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lightblue;
  text-align: center;
}
<a class="search">
  <img src="http://lorempixel.com/output/abstract-q-c-100-25-6.jpg" id="searchImg">
</a>

Upvotes: 1

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

you can do it with the help of jQuery

 $("search").text("your text");
 

Upvotes: 0

Eric
Eric

Reputation: 18912

Well. If you REALLY cannot access the HTML source, the only workable solution I can think of is to generate a pseudo element that covers the image, which displays the text.

/* hide the image on hover */
.search:hover #searchImg {
    visibility: hidden;
}

/* show a pseudo element inside the anchor */
.search:hover {
    position: relative;
}
.search:hover:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: "Some text to display";
}

This is not a very good solution at all. I would rather have a hidden element with the text inside the anchor, that toggles display-status, or just use JavaScript...

Upvotes: 0

Related Questions