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屬性的名字對應上的