CODEWITHSUNDEEP
cssfont-awesomepseudo-element
user10073186
user10073186

Reputation:

font awesome: when use hover::before, the icon disappeared

I want to hover the icon so it will show the before element, but every time I hover it, the icon disappeared, and when I hover the right-half part of the icon, nothing happened. If I change before to after, it works well.

.container {
    background-color: lightgray;
    margin: auto;
    width: 500px;
    height: 200px;
    padding: 100px;
}

.icon {
    font-size: 50px;
    cursor: pointer;
    color: red;
}

.icon:hover::before {
    content: '';
    background-color: black;
    padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


<div class="container">
		<i class="fas fa-exclamation-circle icon"></i>
</div>

Upvotes: 0

Views: 728

Answers (1)

Jennifer Goncalves
Jennifer Goncalves

Reputation: 1514

This will add the black background when hovered over. You can't rest the content as that is utilized to display the icon by FontAwesome.

.container {
    background-color: lightgray;
    margin: auto;
    width: 500px;
    height: 200px;
    padding: 100px;
}

.icon {
    font-size: 50px;
    cursor: pointer;
    color: red;
}

.icon:hover::before {
    background-color: black;
    padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


<div class="container">
		<i class="fas fa-exclamation-circle icon"></i>
</div>

Upvotes: 0

Related Questions