您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现导航栏下划线跟随的示例代码HTML+CSS 实现顶部导航栏菜单制作CSS 带搜索导航栏的示例代码html+css+js实现导航栏滚动渐变效果html+css 实现简易导航栏功能CSS+HTML 实现顶部导航栏功能

2021-09-04 1140人已围观

简介 这篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下：

效果：

代码：

html：

  • aaaa
  • bbbbbbb
  • cccc
  • dddd
  • eeee

css：

 ul { padding:0; margin:0; font-size:0; } li { font-size:20px; padding:5px 15px 5px 15px; display: inline-block; position:relative; cursor: pointer; transition: all 0.5s; } li::before { content:''; display:block; position:absolute; width:0%; bottom:0; left:100%; border-bottom: 2px solid #999; transition: all 0.5s; } li:hover::before { left:0; width:100%; } li:hover ~ li::before { left:0; }

关键部分：

 li:hover::before { left:0; width:100%; } li:hover ~ li::before { left:0; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css样式改变及实际用法详解 CSS 样式书写规范(推荐)在线css sprite/css精灵/雪碧图css样式生成工具CSS使用classList实现两个按钮样式的切换使用CSS样式写选择框右侧小三角css判断某元素的子元素个数并分别设置样式的方法jQuery ui+css3制作圆形音乐播放器样式特效源码

下一篇：CSS实现一个简单loading动画效果css3如何绘制一个圆圆的loading转圈动画css3 animation制作loading白色圆点滑过加载动画特效源码一份纯CSS loading动画效果代码示例纯CSS3实现的红酒碰杯loading动画效果源码css3 svg实现的三角形图标变换loading加载动画特效源码15种HTML5和CSS3炫酷彩色loading加载动画特效详解纯CSS3制作的20种loading动效11种CSS3波形loading加载动画特效

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网