CODEWITHSUNDEEP
htmlcsspseudo-element
mightycode Newton
mightycode Newton

Reputation: 3949

Show icon with the after pseudo selector

I want to show a icon in css. But until now the icon is not visible. Only when I define some text in the a href attribute then the icon will be visible, but also the text

Googled, following tutorials

So I hava a href selector, like this:

return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" class=\"msgdownload\"></a>";

and the css class:

.msgdownload {

  position: relative;

}

.msgdownload::after {
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100% ;
  background: url('../hepchat/downlaod\ -\ kopie.jpg') no-repeat bottom;
}

But the image is not vissible now.

But for example if I do this:

return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" class=\"msgdownload\">donwload</a>";

Then the image is vissible. But also the text download.But I only want to show the Image not the text.

Thank you.

So I try to make it empty like this:

return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" class=\"msgdownload\"></a>";

Upvotes: 2

Views: 5173

Answers (1)

Sangita Kendre
Sangita Kendre

Reputation: 429

Try below css code. You need assign display and height width in order to make it work to class .msgdownload

.msgdownload {
    position: relative;
    width: 50px;
    height: 50px;
    display: block;
}

.msgdownload::after {
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100% ;
  background: url('https://dummyimage.com/600x400/000/fff') no-repeat bottom;
}
<a href="#" class="msgdownload"></a>

Upvotes: 4

Related Questions