Adding Icon on Hover/Active to a Menu Item with CSS

Dear GP Team,

I'd like to underline my menu items on hover and for the active menu item as well. In addition there should appear an icon on the left of the menu item on hover/active.

I used the following CSS for doing so, but the icon is only shown in the menu on the main page, but not on any other. Do you have any idea, how to show it on every page?

.main-navigation li a:after {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    content: "";
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
.main-navigation .main-nav ul li:hover > a:after, 
.main-navigation .main-nav ul li.sfHover:hover > a:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 3px solid #82b62c;
    position: relative;
    top: -10px;
    opacity: 1;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:before, 
.main-navigation .main-nav ul li:hover > a:before, 
.main-navigation .main-nav ul li.sfHover:hover > a:before {
	  background: url(wp-content/uploads/2022/08/Pfoto.jpg);
    background-size: 25px;
    display: inline-block;
    width: 25px; 
    height: 25px;
    content:"";
		background-repeat: no-repeat;
		margin-bottom: -7px;
	margin-right: 8px;
}
  
}

Thank you so much for your help :)