使用 after 伪选择器显示图标

Question

我想在 css 中显示一个图标。但直到现在该图标是不可见的。只有当我在 href 属性中定义一些文本时，图标才会可见，而且文本

Google 搜索，遵循教程

所以我有一个 href 选择器，像这样：

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

和 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;
}

但是图片现在看不到了。

但是例如如果我这样做：

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

然后图像可见。还有文字 download.But 我只想显示图片而不是文字。

谢谢。

所以我试着像这样让它变空:

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

Answer 1

尝试下面的 css 代码。您需要分配 display 和 height width 才能使其适用于 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>

使用 after 伪选择器显示图标

Show icon with the after pseudo selector

html

css

pseudo-element