.nav {
    margin-top:0px;/*顶边距*/
    font-size: 16px;
    text-align: center;
    /* letter-spacing 属性增加或减少字符间的空白（字符间距） */
    letter-spacing: 1px;
}

.nav * {
    /* css3,box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
    content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。
    在宽度和高度之外绘制元素的内边距和边框。 */
    box-sizing: border-box;
    /* 所有属性都将获得过渡效果/持续时间/ ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 */
    transition: all 0.35s ease;
}

.nav li {
    /* 不独占一行的块级元素 */
    display: inline-block;
    /* list-style-position 属性设置在何处放置列表项标记。
    外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。 */
    list-style-position: outside;
    /* margin:4个：上右下左;3个：上、右和左、下；2个：上和下、右和左；1个：4边距离全都一样 */
    margin: 8px 16px;
}

.nav a {
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    position: relative;
}

/* 
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。 */
.nav a::before,
.nav a::after {
    width: 14px;
    height: 14px;
    content: "";
    position: absolute;
    transition: all 0.35s ease;
    opacity: 0;
}

.nav a:hover {
    color: #007bbb;
}

.nav a::after {
    right: 0;
    top: 0;
    border-right: 3px solid #1e90ff;
    border-top: 3px solid #1e90ff;
    transform: translate(-100%, 50%);
}

.nav a::before {
    left: 0;
    bottom: 0;
    border-left: 3px solid #1e90ff;
    border-bottom: 3px solid #1e90ff;
    transform: translate(100%, -50%);
}

.nav a:hover::before,
.nav a:hover::after {
    transform: translate(0%, 0%);
    opacity: 1;
}