悬停时不出现伪元素

Question

I'm trying to style the button on the slides so it would be filled when hovered with the help of pseudo element :before (width 100%). However, the pseudo element doesn't appear when hovered, even though it does when the hover state is toggled from the Chrome Developer Tools.

<div class="featured-slider">
            <div class="featured-profile banner__wrapper js-pause">

                <span class="banner__nav left js-banner__left"></span>
                <span class="banner__nav right js-banner__right"></span>

                <div class="banner__container">
                    <div class="banner__bulg">
                        <ul class="banner__slides no-js">
                            <li class="banner__slide js-banner__slide">
                                <a href="http://localhost/hetifah2/#">
                                    <figure class="banner-profile">
                                        <img width="1280" height="720" src="http://placekitten.com/g/300/400"> </figure>
                                    <h1>
                Menuju Kalimantan yang berbudaya                </h1>
                                    <span class="button-hollow">Bla</span>
                                </a>
                            </li>
                            <li class="banner__slide js-banner__slide">
                                <a href="http://hetifah.com/profil/">
                                    <figure class="banner-profile">
                                        <img width="1280" height="575" src="http://placekitten.com/g/200/300"> </figure>
                                    <h1>
                Bekerja bersama warga, membangun Kaltim &amp; Kaltara               </h1>
                                    <span class="button-hollow">Kenali Hetifah</span>
                                </a>
                            </li>
                        </ul>
                        <!-- end .banner__slides -->
                    </div>
                    <!-- end .banner__bulg -->
                </div>

CSS:

.featured-profile {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 !important; /*rewrite main.css hetifah*/
  width: 100%;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;   
}

.banner__nav {    
  position: absolute;
  width: 100px;
  height: 100%;
  color: #fff;
  top: 0;
  z-index: 5;
  display: block;
  cursor: pointer;
  opacity: 0.15;


  transition: all .3s ease-in-out;
}

.banner__slide a:hover span.button-hollow:before {
  width: 100%;
}

.banner__nav:hover {
  opacity: 0.6;

  transition: opacity .3s ease-in-out;
}

.banner__nav.left {
  left: 0;
  background: rgba(0,0,0,1);
  background: -moz-linear-gradient(left, rgba(0,0,0,.3) 0%, rgba(166,166,166,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(166,166,166,0)));
  background: -webkit-linear-gradient(left, rgba(0,0,0,.3) 0%, rgba(166,166,166,0) 100%);
  background: -o-linear-gradient(left, rgba(0,0,0,.3) 0%, rgba(166,166,166,0) 100%);
  background: -ms-linear-gradient(left, rgba(0,0,0,.3) 0%, rgba(166,166,166,0) 100%);
  background: linear-gradient(to right, rgba(0,0,0,.3) 0%, rgba(166,166,166,0) 100%);
}

.banner__nav.left:before,
.banner__nav.right:before {
  position: absolute;
  top: 40%;
  content: "<";
  font-family: Lato, Helvetica, sans-serif;
  font-size: 64px;
  font-size: 4rem;
  font-weight: 900;
  opacity: 0.8;

  transition: all .3s ease-in-out;
}

.banner__nav.right {
  right: 0;
  background: rgba(0,0,0,1);
  background: rgba(251,158,142,0);
  background: -moz-linear-gradient(left, rgba(251,158,142,0) 0%, rgba(0,0,0,0.3) 61%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(251,158,142,0)), color-stop(61%, rgba(0,0,0,0.61)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(left, rgba(251,158,142,0) 0%, rgba(0,0,0,0.3) 61%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(left, rgba(251,158,142,0) 0%, rgba(0,0,0,0.3) 61%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(left, rgba(251,158,142,0) 0%, rgba(0,0,0,0.3) 61%, rgba(0,0,0,1) 100%);
  background: linear-gradient(to right, rgba(251,158,142,0) 0%, rgba(0,0,0,0.3) 61%, rgba(0,0,0,1) 100%);
}

.banner__nav.left:before {
  left: 20px;
  content: "<";
}

.banner__nav.right:before {
  right: 20px;
  content: ">";
}

.banner__slides {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.banner__slide {
    position: absolute;
    height: 100%;
    width: 100%;
}

.banner__slide:not(:first-child) {
  display: none;
}

.banner-profile {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;

}

.banner-profile img {
  position: absolute;
  top: -50%;
  right: -50%;
  left: -50%;
  bottom: -50%;

  min-width: 100%;
  margin: auto;
  height: auto;
  width: auto;
}

.banner__slide h1 {
  color: #fff;
  padding: 4.045em 75px 0;
}

.banner__slide h1 {
    -webkit-animation: moveUp 1s ease-in-out both;
    -moz-animation: moveUp 1s ease-in-out both;
    -o-animation: moveUp 1s ease-in-out both;
    -ms-animation: moveUp 1s ease-in-out both;
    animation: moveUp 1s ease-in-out both;
}

.banner__slide .button-hollow {
  margin-left: 100px;
}


.banner__slide .button-hollow {
  -webkit-animation: fadeIn 0.5s linear 0.5s both;
    -moz-animation: fadeIn 0.5s linear 0.5s both;
    -o-animation: fadeIn 0.5s linear 0.5s both;
    -ms-animation: fadeIn 0.5s linear 0.5s both;
    animation: fadeIn 0.5s linear 0.5s both;
}


.banner-information h3 {
    font-family: Lora, Georgia, serif;
    font-weight: 900;
}

  .banner__position {
    position: absolute;
    display: block;
    top: 90%;
    left: 45%;
    right: 45%;
    bottom: 20px;
    z-index: 4;
    text-align: center;
    height: 50px;
    list-style-type: none;
    padding: 0;
  }
  .banner__position li {
    display: inline-block;
    margin-left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;

    margin: 6px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(255,255,255,0.5);
    cursor: pointer;
  }

  .banner__position li.active {
    transition: .3s linear;
    box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 5px rgba(255,255,255,0.5);
}

.banner__container {
    position: relative;
    height: inherit;
    overflow: hidden;
    width: 100%;
  }

  .banner__slide a {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    left: 0;
    display: block;
    right: 0;
    bottom: 0;
    top: 0;
    cursor: pointer;
  }
  
  
.home .featured-profile .banner-profile, /* kalau nggak dikasih ini ntar gambarnya mengecil pas browsernya diresize, nggak fit ke figure*/
.page figure.page-intro img {
    min-height: 100%;
}


.featured-profile .banner-profile img {
    min-width: 100%;
    min-height: auto;
    bottom: -50%; /*rewrite main.css*/
}


.home .featured-post, 
.home .featured-profile {
    width: 100%;
}

.featured-slider {
  width: 100%;
  position: relative;
  float: left;
  height: 400px;
  display: block;
  overflow: hidden;
}

body {
  font-size: 16px;
  font-size: 1rem;
}

/*--------------------------------------------------------
                     CUSTOM STYLES
----------------------------------------------------------*/


.home .featured-profile .banner-profile, /* kalau nggak dikasih ini ntar gambarnya mengecil pas browsernya diresize, nggak fit ke figure*/
.page figure.page-intro img {
    min-height: 100%;
}




    h1 {
        font-size: 28px;
        font-size: 1.75rem;
    }


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}


h1 {
    font-size: 2em;
    margin: .67em 0
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

td,
th {
    padding: 0
}

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}


.featured-profile {
    position: relative;
    height: 450px;
    overflow: hidden;
    padding-top: 8.09em;
    color: #fff
}

.featured-profile h1 {
    width: 50%;
    font-style: italic
}

.featured-profile h1:before {
    content: "\201C";
    font-size: 6rem;
    float: left;
    line-height: 1;
    margin-top: -.05em;
    margin-right: .15em
}

.featured-profile .banner-profile {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    margin: 0
}

.featured-profile .banner-profile img {
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    z-index: -3;
    min-width: 100%;
    height: auto;
    width: auto;
    margin: auto;
    bottom: auto
}


.button-hollow {
    background: none;
    border: 2px solid #fff158;
    padding: .5em 1.5em;
    color: #fff158;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: color .65s ease;
    transition: color .65s ease
}

.button-hollow:before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff158;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}



.button-hollow:active,
.button-hollow:focus,
.button-hollow:hover {
    border-color: #f2e554;
    color: #1b1b1b
}

.button-hollow:active:before,
.button-hollow:focus:before,
.button-hollow:hover:before {
    width: 100%
}




body {
    color: #1b1b1b;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Lora, Georgia, serif;
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 .75em
}

.h1,
h1 {
    font-size: 36px;
    font-size: 2.25rem
}

a {
    color: #1b1b1b;
    text-decoration: none;
    -webkit-transition: color .15s ease;
    transition: color .15s ease
}

a:active,
a:focus,
a:hover {
    color: #545454
}

img,
picture {
    margin: 0;
    max-width: 100%;
    height: auto
}

.banner-profile img,
.entry-thumb img {
    max-width: none
}

JS:

    /*
 * Copyright 2014 by Intellectual Reserve, Inc.
 *
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Author:        Adam Carson
 * Website: http://clearwavedesigns.com/code/plugins/
 * Dependencies:  jquery.js (1.8.3+)
 *
 * Name: [no name]
 * Description: 
 * Options: 
 */

// jQuery no conflict mode
// http://stackoverflow.com/a/27619287/651170
//<![CDATA[

jQuery(function($) {
  var BANNER = {};

  BANNER.num = 0;
  BANNER.timer;
  BANNER.pause = false;

  BANNER.slides = $('.js-banner__slide');

  BANNER.positions;
  BANNER.position = 0;

  // CHANGE BANNER
  BANNER.change = function(value) {
    BANNER.slides.eq(BANNER.num).fadeOut(2000);
    BANNER.positions.eq(BANNER.num).removeClass('active');
    if (BANNER.num + value > BANNER.slides.length - 1) {
      BANNER.num = 0;
    } else if (BANNER.num + value < 0) {
      BANNER.num = BANNER.slides.length -1;
    } else if (value === 'manual') {
      BANNER.num = BANNER.position;
    } else {
      BANNER.num += value;
    }
    BANNER.slides.eq(BANNER.num).fadeIn(2000);
    BANNER.positions.eq(BANNER.num).addClass('active');
  };

  // INITIALIZE
  BANNER.init = function() {
    for (var i = 0; i < BANNER.slides.length; i++) {
      $('.js-banner__position').append(document.createElement('li'));
    }
    $('.js-banner__position li:first-child').addClass('active');
    BANNER.positions = $('.js-banner__position li');
    $('.js-banner__position li').on('click', function() {
      BANNER.position = $(this).index();
      BANNER.change('manual');
    });
    BANNER.timer = setInterval(function() {
      if(!BANNER.pause) {
        BANNER.change(1);
      }
    }, 5000);
    
    $('.js-pause').on('mouseenter', function() {
      BANNER.pause = true;
    });
    $('.js-pause').on('mouseleave', function() {
      BANNER.pause = false;
    });
    $('.js-banner__left').on('click', function() {
      BANNER.change(-1);
    });
    $('.js-banner__right').on('click', function() {
      BANNER.change(1);
    });
  };
  
  BANNER.init();

   /* var sliderFired = 0;
    if ($(window).width() > 480) {
      BANNER.init();
      sliderFired = 1;
        } 
        else {
          BANNER.destroy();
          delete BANNER;
          sliderFired = 0;
        }
*/
});

//]]> 

This is the gfycat to better illustrate the problem: http://imgur.com/1NhDRls

This is the gfycat of the desired effect: http://imgur.com/SSb9lsX

Thank you for your help!

Answer 1

You need to remove the position: absolute; from .banner__slide a and remove the following all together:

.banner__slide a:hover span.button-hollow:before {
  width: 100%;
}

Codepen