Trying to have SVG images above each menu item

I've taken most of this from the documentation for the expanding line menu CSS trick. What I'm trying to do is add an SVG image above the menu item aswell that will appear once you hover over it and if you're on its page. This code makes it appear but when I execute the display: none, redisplaying it again doesn't work. Not just that but obviously my positioning is all wrong/menu-items not big enough. Am i on the right path?

@media (min-width: 769px) {
.main-navigation .menu > li > a:before {
      content:"";
      position: absolute;
      height: 35px;
      width: 35px;
      background-image: url(home.svg);
   //   display: none;
}

 .main-navigation .menu > li > a::after {
      content: "";
      position: absolute;
      right: 0;
      left: 50%;
      bottom: 0px;
    
      -webkit-transform: translate3d(-50%,0,0);
      transform: translate3d(-50%,0,0);

     
      width: 0;
      height: 3px;

        background-color: #004AAD;
       transition: 1.0s width ease;
  }

 .main-navigation .menu > li.current-menu-item > a::before,
  .main-navigation .menu > li.current-menu-ancestor > a::before
  .main-navigation .menu > li > a:hover::before {
      display: block;
  }

 .main-navigation .menu > li.current-menu-item > a::after,
  .main-navigation .menu > li.current-menu-ancestor > a::after,
  .main-navigation .menu > li > a:hover::after {
      width: 50%;
  }
}

Sorry, this is on localhost at the moment so I can't quite show what I mean. A push in the right direction and I might be able to figure the rest out.