苹果风格的下划线

灰太狼 2022-08-26 00:41 146阅读 0赞

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

![SouthEast][]

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

好啦，开工啦，先看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;
    }

完工。

\---------------------------------------------------------------[  
][Link 3]

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

[SouthEast]: /images/20220824/c420d903d81f4b5b8db07422cb817cb6.png
[Link 1]: http://codepen.io/whqet/pen/Ciute
[Link 2]: http://codepen.io/whqet/share/zip/Ciute/
[google web font sass mixin]: http://blog.csdn.net/whqet/article/details/21295245
[Link 3]: http://blog.csdn.net/whqet