Argi Kartika Argi Kartika - 3 months ago 12
HTML Question

Pseudo element doesnt appear when hovered

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 fiddle:
http://codepen.io/argikartika/pen/jrONWQ

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

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