Apple-style underline

Today we are studying the effect of an apple-style underline made of text-shadow and: after pseudo objects.

Click here for online research and click here for download.

Okay, it's starting. Let's look at html first.

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

CSS focuses. We use google web font. We used the google web font sass mixin introduced in the previous article.

@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); 

Then, it's the final chapter.

/* Set the font color, background color */body {background-color: # 32a5fc; color: # fff;}/* set the font. Note that we should place the underline under the font, therefore, you need position: absolute; */span {position: absolute; margin: 100px; font-family: Condiment; font-size: 60px; font-weight: 300 ;} /* set the shadow, which is equivalent to stroke text */. underlined {text-shadow:-5px 0 0 0 # 32a5fc, 5px 0 0 # 32a5fc, 0-5px 0 # 32a5fc, 0 5px 0 # 32a5fc;}/* underline */. underlined: after {z-index:-1; position: absolute; bottom:-1px; left: 0; content: ""; width: 100%; height: 2px; background-color: # fff ;}

Finished.

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

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------