Efek Hover dengan Pseudo Element :after pada CSS3

13/09/2017    Risman Hakim    38     Website

Pseudo merupakan selector CSS3 yang berfungsi menyeleksi tag ataupun mengakses sebuah elemen yang sebelumnya tidak tersdefinisikan. Pada pseudo-element ditandai dengan tanda titik dua (:), sebagai contoh penulisan pseudo-element ditulis menjadi p:first-line. Pada pengalikasian nya pseudo banyak sekali kegunaan tergantung bagaimana kita bisa memodifikasinya, sebagai referensi saya akan kasih tutorial efek hover dengan pseudo-elelement :after pada css3. simak langkah-langkah nya berikut ini.

langkah pertama untuk membuat efek hover adalah menuliskan struktur HTML5 untuk objek hovernya seperti berikut.

<body>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Work</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
</body>

Pada kasus ini saya menggunakan list sebagai objek hover nya, setelah membuat struktur HTML seperti diatas, selanjutnya barulah kita membuat efek hover dengan CSS3 berikut.

body{
  margin: 0px;
  padding: 0px;
  background: #e74c3c;
  font-family: 'Lato', sans-serif;
}

nav{
  float: none;
  clear: both;
  width: 30%;
  margin: 10% auto;
  background: #eee;
}

nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

nav li{
    float: none;
  width: 100%;
}

nav li a{
  display: block;
  width: 100%;
  padding: 20px;
  border-left: 5px solid;
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: #444;
  box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box;
}
    
nav li a:hover{ border-bottom: 0px; color: #fff;}
nav li:first-child a{ border-left: 10px solid #3498db; }
nav li:nth-child(2) a{ border-left: 10px solid #ffd071; }
nav li:nth-child(3) a{ border-left: 10px solid #f0776c; }
nav li:last-child a{ border-left: 10px solid #1abc9c; }

nav li a:after {
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  width: 0px;  
  position: absolute;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  z-index: -1;
}

nav li a:hover:after{ width: 100%; }
nav li:first-child a:after{ background: #3498db; }
nav li:nth-child(2) a:after{ background: #ffd071; }
nav li:nth-child(3) a:after{ background: #f0776c; }
nav li:last-child a:after{ background: #1abc9c; }

 

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}

Setelah semua kode HTML dan CSS3 diketikan, langkah selanjutnya simpan file kemudian buka dibrowser masing-masing dan lihat hasilnya. maka akan terlihat seperti gambar berikut.

jika kita arahkan kursor pada list menu, akan terjadi efek hover. Nah, seperti itulah pengaplikasin pseudo-element yang bisa kita gunakan dalam membuat efek hover. Baiklah sampai disini tutorial sederhana mengenai efek hover dengan pseudo element :after pada CSS3, semoga bermanfaat dan selamat mencoba.

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More