Reputation: 333
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
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
Reputation: 1246
you can do it with the help of jQuery
$("search").text("your text");
Upvotes: 0
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