设置下划线样式

设置下划线样式

• 知识点：
• 1、应用伪类，点击查看CSS伪类有哪些；
• 2、运用CSS3属性transition查看和transform查看；

<!--主要代码：-->
<style>
    div{width: 200px;margin: 100px auto;}
    span{
        display: block;
        position: relative;
        font-size: 20px;
        transition: all 250ms ease;
        margin: 20px;
        cursor: pointer;
    }
    span:hover{
        color: orangered;
    }
    span:after{
        content: "";
        width: 140px;
        height: 2px;
        background: #4d90c4;
        position: absolute;
        bottom: -3px;
        left: 0px;
        transform-origin: center center;/*设置元素基点位置*/
        transform: scaleX(0);           /*设置元素X轴缩放*/
        transition: all 250ms ease;     /*缓慢变化*/
    }
    span:hover:after{                   /*hover之后再使元素X轴放大1倍*/
        transform: scaleX(1)
    }
</style>
<div>
    <span>鼠标移动到这里</span>
</div>

• :hover
• 在鼠标放到设置该元素的上面时发生变化，尝试一下
• :after
• 顾名思义，在某元素的后面添加内容，包括文字、颜色、图片，尝试一下
• 当然，与之对应的是:before 查看

  div:after
  {
      content:"后面添加的内容";
      background:url('路径');
      color:red;
      font-weight:bold;
  }