左上角或右上角显示提醒圆点

最新推荐文章于 2025-04-08 15:54:06 发布

技术leader

最新推荐文章于 2025-04-08 15:54:06 发布

阅读量748

点赞数

分类专栏： # CSS 文章标签： css html

本文链接：https://blog.csdn.net/Zhu_daye/article/details/109098383

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

效果图（如果想要三角形请点击这里）：

代码：

<html>
<head>
    <style type="text/css">
        .message_s {
            position: relative;
            cursor: pointer;
        }

            .message_s:after {
                position: absolute;
                content: "";
                /*以下内容可以根据实际需要进行调整 -----start------*/
                top: 0px;
                left: -13px; /*改成：right: -13px; 圆点显示在右侧*/
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #e98b7f;
                /*-----end------*/
            }

        div {
            height: 30px;
            border: 1px #000 solid;
            width: 300px;
            line-height: 30px;
            padding: 0px 0px 0px 15px;
        }
    </style>
    <script>
        function clickAction()
        {
            console.log("天不生我leader，键道万古长如夜！");
        }
    </script>
</head>
<body>
    <div>
        <span class="message_s" onclick="clickAction()"></span>
        剑开天门
    </div>
</body>
</html>