从 CSS 文件中删除元素

Question

I want to remove a small button/element that is under my preloader. I am trying to figure out exactly what kind of css file controls that but I am unable to remove that element under the preloader. I thought adding overflow:hidden to the svg would do the trick but it still did not.

This is the code of the preloader:

 * { padding: 0; margin: 0; box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap'); .svg-file path { fill: transparent; stroke-width: 3; stroke: rgb(1, 36, 133); }.svg-file.z-logo path { stroke-dasharray: 550; stroke-dashoffset: 0; }.svg-file.z-logo path { animation: animate-zlogo 2s linear infinite; } svg { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)); transform: scale(2); }.svg-file h2 { font-family: "Roboto", cursive; transform: translate(0, 50px) skewX(-210deg) rotate(-6deg); font-size: 3em; color: #044d77; }.svg-file span { animation: dots 2.5s steps(6, end) infinite; font-size: 5em; display: block; transform: translate(0, 65px) skewX(-210deg) rotate(-6deg); background-color: rgb(5, 46, 80); width: 8px; height: 5px; } @keyframes fadein-fadeout { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes animate-zlogo { 0% { stroke-dashoffset: -50; } 20% { stroke-dashoffset: 550; fill: transparent; } 40% { fill: transparent; stroke-dashoffset: 1100; } 60% { stroke-dashoffset: 1100; fill: #05f7f9; } 80% { stroke-width: 0; fill: #05f7f9; } 100% { /* stroke-dashoffset: 0; */ stroke-width: 3; fill: transparent; } } #preloader { position: absolute; margin: auto; z-index: 9999; overflow: hidden; background: white; display: flex; justify-content: center; align-items: center; align-content: center; top: 0px; left: 0px; bottom: 0px; right: 0px; }.z-logo svg { top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; justify-content: center; align-items: center; align-content: center; position: relative; display: flex; width: 50%; }.z-logo::before { content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; background: black; position: absolute; display: inline-flex; border: 1px solid black; width: 200px; height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="preloader"> <div class="svg-file z-logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"> <g id="H"> <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" /> </g> </svg> <span></span> </div> </div>

This is the element I want to remove under my preloader:

Answer 1

Just remove <span></span> from your HTML code.

 * { padding: 0; margin: 0; box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap'); .svg-file path { fill: transparent; stroke-width: 3; stroke: rgb(1, 36, 133); }.svg-file.z-logo path { stroke-dasharray: 550; stroke-dashoffset: 0; }.svg-file.z-logo path { animation: animate-zlogo 2s linear infinite; } svg { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)); transform: scale(2); }.svg-file h2 { font-family: "Roboto", cursive; transform: translate(0, 50px) skewX(-210deg) rotate(-6deg); font-size: 3em; color: #044d77; }.svg-file span { animation: dots 2.5s steps(6, end) infinite; font-size: 5em; display: block; transform: translate(0, 65px) skewX(-210deg) rotate(-6deg); background-color: rgb(5, 46, 80); width: 8px; height: 5px; } @keyframes fadein-fadeout { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes animate-zlogo { 0% { stroke-dashoffset: -50; } 20% { stroke-dashoffset: 550; fill: transparent; } 40% { fill: transparent; stroke-dashoffset: 1100; } 60% { stroke-dashoffset: 1100; fill: #05f7f9; } 80% { stroke-width: 0; fill: #05f7f9; } 100% { /* stroke-dashoffset: 0; */ stroke-width: 3; fill: transparent; } } #preloader { position: absolute; margin: auto; z-index: 9999; overflow: hidden; background: white; display: flex; justify-content: center; align-items: center; align-content: center; top: 0px; left: 0px; bottom: 0px; right: 0px; }.z-logo svg { top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; justify-content: center; align-items: center; align-content: center; position: relative; display: flex; width: 50%; }.z-logo::before { content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; background: black; position: absolute; display: inline-flex; border: 1px solid black; width: 200px; height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="preloader"> <div class="svg-file z-logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"> <g id="H"> <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" /> </g> </svg> </div> </div>