显示带有伪选择器之后的图标

Question

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

谷歌搜索，以下教程

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

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

和 CSS 类：

.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>";

然后图像是可见的。还有文本下载。但我只想显示图像而不是文本。

谢谢。

所以我试着让它像这样空：

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

Answer 1

试试下面的css代码。您需要分配display和heightwidth，以使其适用于类.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>