当年求学的时候有个老师很喜欢说

"老师说这个很重要的意思就是......这个很~ 重 ~ 要~"

身为填鸭式教育下的孩子马上就跟老师心心相印心意相通心领神会这句话背後的涵义! 抄起红笔萤光笔马克笔爱心笔就画下了底线 ( 谢谢老师 )

说了这麽多，有感觉到"底线"在一般生活中有标示重点的意思了吗~(?)

在网页中我们也经常可以看到在功能性的物件上，用底线来与使用者进行互动喔 ! 但一样都是底线...F12按下去之後会发现有数种写法 !(赞叹)

以下就来分享一些我收集的底线写法吧!

分享

HTML 的部分很简单

<div class="item">
      <a href="#">box</a>
</div>

有趣的 CSS

伪元素+block

.line-block a::after{
  content:" ";
  display:block; 
  width: 0%;
  height: 4px;
  background-color: #f00;
  transition: .4s .2s;
}
.line-block a:hover::after{
  width:100%;
}

伪元素预设是inline属性，所以必须用display:block让它能设置宽度

border-bottom 改变粗细出现的效果

.line-border a{
   border-bottom:0px solid #f00;
   transition: .4s;
}
.line-border a:hover{
  border-bottom:4px solid #f00;
}

border+absolute

.line-absolute a{
  position:relative;
}
.line-absolute a::after{
  content:" ";
  position: absolute;
  right:50%;
  left:50%;
  bottom:-5px;
  border-bottom:4px solid #f00;
  transition: .3s;
}
.line-absolute2 a:hover::after{
  right:0%;
  left:0%;
}

设置position: absolute;可以让伪元素能设定宽高

scale 放大缩小好简单

.line-scale a {position: relative;}
.line-scale a::after{
  content:" ";
  width: 100%;
  height: 4px;
  background-color: #f00;
  position: absolute;
  left: 0;
  bottom: 0;
  
  transform:translateY(-8px) scale(0);
  opacity: 1;
  transition: .6s;
}
.line-scale a:hover::after{
  transform:translateY(8px) scale(1);
  opacity: 1;
}

left-right 追尾的感觉特别帅

.left-right a{
  position:relative;
}
.left-right a::after{
  content:"";
  display:block;
  width: 0;
  height: 4px;
  background-color: #f00;
  position:absolute;
  right: 0;
  transition:.4s;
}
.left-right a:hover::after{
  width: 100%;
  left: 0;
}

绚烂的 gradient + animation

.left-right-animation a{
  position:relative;
}
.left-right-animation a::before{
  content:"";
  width: 100%;
  height: 4px;
  background: linear-gradient(to right,#ff0 5%,#f00 100%);
  position:absolute;
  right: 0;
  bottom: -8px;
  animation: Go2 3.5s infinite alternate cubic-bezier(0.57, 0.35, 0.45, 0.69);
}
.left-right-animation a::after{
  content:"";
  width: 0%;
  height: 4px;
  background: linear-gradient(to left,#ff0 5%,#f00 100%);
  position:absolute;
  left: 0;
  bottom: -8px;
  animation: Go 3.5s infinite alternate cubic-bezier(0.57, 0.35, 0.45, 0.69);
}
 @keyframes Go{ 100%{  width: 100%;};}
 @keyframes Go2{ 100%{  width: 0%;};}

大部分的底线都会使用到transition进行动画过渡的效果控制，让使用者摸到的时候产生互动效果

懂得原理之後再去到各个网页去看看不同的写法，就会有灯泡亮起来的感觉呢~
每一种表现出来的特性都有其差异，稍微改一点点就可以有不一样的效果罗!

尾声：

书 vs 影片 vs 线上课程 都几?

我是文组出身，後来的工作也跟资讯类完全没有关系
属於第一线听令行事薪水很少当领班还没有加钱休假责任制的服务人员

刚开始学的时候也买过不少人气排行榜前五位的影片教程跟书
虽然内容很丰富，也带了很多实作
但是碍於篇幅或影片时长的关系，很多基础都是简单讲过
常常会越看越雾煞煞(每一部影片我至少都看了两次以上阿...)

单纯地照着影片内容一步步的操作...
就花了很多时间去理解「为什麽突然跳到那一步?」

这时候观念都很破碎QQ

当时花了将近3个月我没办法自己切出一个板...

正如其他转职前辈说的，网路上虽然资源很丰富，但是资讯很破碎

而新手最需要的就是一个导读者协助建立观念系统

後来看了Amos老师的金鱼系列对基本观念有了认知!

勉强可以切简单的东西，但切起完整的版还是磕磕绊绊的QQ

不聪明的我牙一咬，决定要花人生第一笔的补习费!

陆陆续续看了许多线上直播课程的试教跟心得文後还是决定找Amos学习

上课只能说很精采、很有趣，我一直在萤幕前发出哇喔哇喔的声音，新世界的大门一直打开(笑)

虽然之前花了不少时间盲目摸索，可上课的时候会对老师说的内容更有感触，会有
「哇喔~原来是这样!我之前都做错了，难怪版会失控」，或是「哇喔 ~原来上次那个还可以这样做，更方便了呢」的感悟

因为是小班教学，上课可以很轻松、很细致，老师会提供很多练习的方向，加码是每次上课都可以触发的奇遇(触发条件：问问题)，还可以听到来自不同业界的同学自由提出各种问题，包括闹闹的吐槽老师或是工作上遇到的瓶颈
对预备加入这个领域的人打了不少预防针XD

隔三岔五老师还会把他研究的心得分享出来~

重点就是同学问出的问题还可以挖出老师很多东西!

所以收获不只是从老师，还有从同学的提问 :)

有老师带的好处就是可以省很多盲目摸索的时间〒︿〒

因为老师会直接告诉你「为什麽要做那一步」，以及那个属性的基本使用

不懂就直接打断老师读条写code啦!

即时性的解惑就是影片教学难以顾全的，

马上获得提示、思考可能解答、马上练习，坚持住这个循环可以省相当多时间

把基础观念收拾好了，再自学会觉得轻松很多~

先前花钱买的书跟影片也没有浪费，後来就是我的课後读物了(懂了之後基本上就是跳着看XD)

老话一句，师父引进门、修行在个人~
起步已经比别人慢了，就要比别人努力N倍 -->引自《转职软件工程师之旅：行前准备》

PS.千万别放弃自己的Code Review机会以及每个同学的Code Review喔~~
(老师会很认真的看每一个人的code，充满各种彩蛋的时候!)

在结束一段课程後决定考验我这段时间自学的成果，立下挑战30天30篇文的目标

其实我很苦恼不知道要写什麽，怀疑自己有那麽多东西可以写吗?

上课气氛虽然很热络，迟钝的新手虽然很想加入讨论、很想问问题但是却不知道自己问题在哪里

也不清楚自己哪里卡住了? 哪里不懂?

下课後透过实作，仿着老师的步骤一步一步做才会发现自己为什麽不懂

去Google、去翻笔记，重新推一次思考，不看示范code自己重写一次

这个过程中把心得跟问题整理成文字就会发现缺失了哪些

即便推不出来也能把尝试过的路记录下来，老师一看就知道新手卡在哪里了

在这30天里面，我常常都是边写边查资料边实作边看天亮(泪)

但收获真的很多，原本熟悉的属性用得更顺手且挖出了其他用法，不熟悉的属性也学了起来

利用实作的时候顺便练习JS

万事起头难呀，学习新东西真的是走一步摔一步

钝化好久的脑子重新运转起来像没点油的齿轮，一转就嘎嘎作响

摔得好痛、好气馁、好想放弃...

但看到辛苦做出来美美的成品，还有自己在实作过程遇到的问题与想法在跟老师Code Review讨论时，获得纠正、建议与称赞就感觉到无比的成就感，辛苦不白费呀~

就这样一步一步累积才觉得慢慢顺畅起来

感谢看完的前辈、朋友们!

还有鼓励我踏上这条路，默默给我鼓励与无私提供学习资源的朋友们~~

转职之路很难! 但是很有趣 :)

继续努力中~ 希望可以顺利找到新工作XDD