css 自定义悬浮窗写法

HTML:

  <span class="info" data-title="详情"></span>

css(sass):

 .info {
        }
        &:hover::after {
          content: attr(data-title);
          display: inline-block;
          width: 70px;
          height: 22px;
          border: 1px solid #0088d8;
          font-size: 14px;
          font-family: FZLanTingHeiS-R-GB;
          font-weight: 400;
          color: #00d2ff;
          margin-top: 30px;
          line-height: 22px;
          text-align: center;
          margin-left: -20px;
        }
      }

要注意data-title这个是和after伪类中的content的attr属性的名字对应上的

posted @ 2020-09-17 20:51  洛晨随风  阅读(1244)  评论(0编辑  收藏  举报