Question

您好我的html页面中有一些链接，我想在我的链接旁边设置一个通知徽章（使用css），但我不知道如果用户点击该链接后通知徽章会消失链接。

CSS：

<html>
<head><title></title></head>
<body>
<p id="demo">Sandeep Roy</p> 
<button type="button" onclick="change()">Click</button>
<script>
function change() {
  document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>

HTML：

.badge1 {
    position:relative;
}

.badge1[data-badge]:after {
    content:attr(data-badge);
    position:absolute;
    top:-10px;
    right:-10px;
    font-size:.7em;
    background:red;
    color:white;
    width:30px;height:18px;
    text-align:center;
    line-height:18px;
    border-radius:50%;
    box-shadow:0 0 1px #333;
}

Answer 1

编辑：它不起作用

我猜你可以用这个：

a:visited .badge1:after{
  content: none;
}

用户点击链接后如何关闭css通知徽章

1 个答案: