当前位置:   article > 正文

纯css实现tab导航栏下划线

纯css实现tab导航栏下划线

 

  1. <div class="title">
  2. <span>基础信息</span>
  3. </div>
  1. .title {
  2. position: relative;
  3. height: 40px;
  4. line-height: 40px;
  5. &::after {
  6. content: "";
  7. position: absolute;
  8. left: 0;
  9. bottom: 0;
  10. width: 100%;
  11. height: 2px;
  12. background-color: #f2f4fe;
  13. }
  14. span {
  15. display: inline-block;
  16. position: relative;
  17. padding: 0px 5px;
  18. font-size: 18px;
  19. color: #3d3d3d;
  20. &::after {
  21. content: "";
  22. position: absolute;
  23. left: 0;
  24. bottom: 0;
  25. width: 100%;
  26. height: 2px;
  27. background-color: #409eff;
  28. z-index: 1;
  29. }
  30. }
  31. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/593162
推荐阅读
相关标签
  

闽ICP备14008679号