苹果风格的下划线

今天研究一个利用text-shadow和:after伪对象做成的苹果风格的下划线效果。

在线研究点这里，下载收藏点这里。

好啦，开工啦，先看html了

<span class="underlined">everybody go go go!</span>

CSS重点，我们用到了google web font，我们使用了上一篇文章里介绍的 google web font sass mixin。

@mixin gwf($fonts) {  
  $url: "http://fonts.googleapis.com/css?family=";  
  $nb: 0;  
    
  @each $font-name in $fonts {  
    $nb: $nb + 1;  
    $nb-word: 0;  
      
    @each $word in $font-name {  
      $nb-word: $nb-word + 1;  
      $url: $url + $word;  
        
      @if $nb-word < length($font-name) {  
        $url: $url + "+";   
      }   
    }  
      
    @if $nb < length($fonts) {  
       $url: $url + "|";   
    }  
  }  
    
  @import url(#{$url});  
}  
$fonts: Condiment, The Girl Next Door,Nothing You Could Do;  
@include gwf($fonts); 

然后，就是正章啦

/* 设置字体颜色，背景颜色 */
body {
  background-color: #32a5fc;
  color: #fff;
}
/* 设置字体,注意我们要把下划线放到字体下面，所以需要position:absolute; */
span {
  position: absolute;
  margin:100px;
  
  font-family: Condiment; 
  font-size: 60px;
  font-weight: 300;
}
/* 设置阴影，相当于描边文字 */
.underlined {
  text-shadow:
    -5px 0 0 #32a5fc,
    5px 0 0 #32a5fc,
    0 -5px 0 #32a5fc,
    0 5px 0 #32a5fc;
}
/* 下划线 */
.underlined:after {
  z-index: -1;
  position: absolute;
  bottom: -1px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #fff;
}

完工。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------