笔记：前端中可以给每个标签添加 title属性经行描述怎么修改默认样式

最新推荐文章于 2025-10-12 10:51:42 发布

原创最新推荐文章于 2025-10-12 10:51:42 发布 · 515 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#笔记 #前端

收录于

直接上代码👇

第一步：给标签设置自定义属性我这里设置得data-title （随便设置）

 <span class="sub_menu_title" :data-title="demo">{{demo}}</span>

第二步：添加对应样式

[data-title] {
  &:hover {
    position: relative;
    &:after {
      content: attr(data-title);
      position: absolute;
      top: 20px;
      left: 10px;
      color: #0036bd;
      font-size: 12px;
      border: 1px solid #ddd;
      background-color: #fff;
      z-index: 20;
      line-height: 1.5;
      font-style: normal;
      white-space: nowrap;
      padding: 0 5px;
    }
  }
}

效果如图👇