css动画效果——初学者的看法：实现鼠标移入菜单栏文字下出现下划线
新手第一次接触CSS的动画效果，在这里偶然看到了菜单栏的动态下划线效果，个人认为其他人对代码的解析不够直观，在这里写上本人对代码的看法。
这里先附上全代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
background-color: #2D3E50;
}
header nav ul {
width: 50%;
padding: 0;
margin: 0 0.8em;
}
header nav ul li {
display: inline-block;
padding: 0 0.8em;
}
header nav a {
position: relative;
text-decoration: none;
color: #fff;
display: block;
padding: 1.2em 0.8em;
}
header nav .nav-underline:before {
content: "";
position: absolute;
bottom: 0;
width: 0;
border-bottom: 2px solid #fff;
}
header nav .nav-underline:hover:before {
width: 80%;
}
header nav .nav-underline:before {
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="#" class="nav-underline">HOME</a>
</li>
<li>
<a href="#" class="nav-underline">SKILLS</a>
</li>
<li>
<a href="#" class="nav-underline">INTERESTS</a>
</li>
<li>
<a href="#" class="nav-underline">CONTACT ME</a>
</li>
</ul>
</nav>
</header>
</body>
</html>效果可以点开看一下：点我
这个动画看起来很简单但我个人觉得很实用，下面我来逐句分析每句的意思，也为了我日后更好的回顾 = =
首先先来看body部分也就是导航条的内容部分
<body>
<header>
<nav>
<ul>
<li>
<a href="#" class="nav-underline">HOME</a>
</li>
<li>
<a href="#" class="nav-underline">SKILLS</a>
</li>
<li>
<a href="#" class="nav-underline">INTERESTS</a>
</li>
<li>
<a href="#" class="nav-underline">CONTACT ME</a>
</li>
</ul>
</nav>
</header>
</body><header><nav>标签分别是头部和导航，导航条通常用ul来写，
在这里写四个栏目“home”“skills”“interest”“contact”同一类名为“nav-underline”。
接下来看CSS部分代码：
body {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
background-color: #2D3E50;
}body属性margin 和 padding 属性归 0 让整个页面边距变 0；
header属性设置宽为百分百，默认撑满整个浏览器的宽度，设置高度为70px，背景颜色为#2D3E50。
header nav ul {
width: 50%;
padding: 0;
margin: 0 0.8em;
}
header nav ul li {
display: inline-block;
padding: 0 0.8em;
}header nav ul 属性设置了四个栏目所占整个 header 的宽度为 50%，也就是占了一半；
padding设置四个内边距为 0；
margin属性设置外边距的上下为 0 ，左右为 0.8em。
header nav ul li 属性将四个 li 属性变成行中块，也就是 display:inline-block ;
意义在于将数列的 li 变为行，
padding将四个 li 的内边距上下边距为0 左右边距为0.8em。
以上的padding 和 margin 属性的数值可以自己调整直到喜欢为止。。。
header nav a {
position: relative;
text-decoration: none;
color: #fff;
display: block;
padding: 1.2em 0.8em;
}在这里将a链接相对定位
那么问题来了，为什么要定位，这是我作为一个初学者看到其他人的代码的时候所想的东西。
我们在这里看一下position：relative的定义：生成相对定位的元素，相对于其正常位置进行定位。
在这里我个人理解为四个a链接相对于导航条的调整而进行调整。
text-decoration：none：这个属性是默认，定义标准的文本，也就是原文本不变。
color：#fff 字体颜色变白
display：block 此元素作为块元素，前后有换行符。
在这里我理解为四个单独的a链接各自成块，没有换行是因为之前整个导航条设置了行中快属性。
padding属性设置上下间距1.2em 左右0.8em。
header nav .nav-underline:before {
content: "";
position: absolute;
bottom: 0;
width: 0;
border-bottom: 2px solid #fff;
}在这里用到了一个：before选择器
定义和用法
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
我们可以看到代码在类名为nav-underline的内容前插入了以下内容：
因为我们不插入文本内容，仅仅插入下边框，所以content属性为“”；
在这里position属性又变成了绝对定位，个人认为是下边框必须要和a链接的四个下边框绝对定位，总不能让下边框跑到其他块里面吧 = =
width属性设置为0 ，因为下边框的长度是从0开始增长的，初始值就该是0.
border-bottom设置下边框。
header nav .nav-underline:hover:before {
width: 80%;
}在这里又有一个选择器叫做：hover 选择器，hover选择器用于选择鼠标指针浮动在上面的元素。
这段代码我理解为当鼠标指针放在类名为nav-underline的元素上时，触发之前写的before选择器中的内容，将before中的下边框宽度从0涨到80%。
header nav .nav-underline:before {
transition: width 0.5s ease-in-out;
}这段代码就很好理解了，在:before选择器中当鼠标指到类名为nav-underline的元素上时，用0.5S的时间完成整个过程，效果是：规定以慢速开始和结束的过渡效果
效果有很多：这里贴上W3SCHOOL的例子http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp
——————————————————————————————————————————————
到此，整个导航条菜单栏文字下出现下划线的效果就已经全部写完了，作为初学者可能会对其中有些属性的理解不是很到位，如果能有大手指导的话我本人十分感激不尽。
如果对以上内容的理解有所异议的话欢迎到下面评论来指出我的不足，欢迎大家的讨论。
文字内容为本人原创（代码除外），如果转载的话请说明出处。