(css)css实现关闭按钮

nyf_unknown

已于 2022-07-25 13:53:53 修改

阅读量2.1k

点赞数

分类专栏： CSS 文章标签： CSS 关闭按钮伪元素 hover效果前端设计

于 2022-06-02 15:43:04 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/125101872

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

(css)css实现关闭按钮：

		<div class="right-title">
		  <span class="right-title-text">热门问答</span>
		  <span class="right-title-btn" @click="handleClose"></span>
		</div>
// 关闭按钮
      .right-title-btn {
        position: relative;
        margin: 3px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        box-sizing: border-box;
      }
      .right-title-btn:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 25px;
        background: #fff;
        transform: rotate(45deg);
        top: -3px;
        left: 11px;
      }
      .right-title-btn:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 25px;
        background: #fff;
        transform: rotate(-45deg);
        top: -3px;
        left: 11px;
      }