How to hide portion of a line when it's under a certain html element?

user_14764973 0
Viewed 41

I'm having some issues getting the css just right, so I appreciate any help! I have a line that's behind some buttons and all of them have a transparent background (no issue if it's an image/button that's not transparent since it's behind the object). Currently, I have :

-----[--button--]------[--button2--]----[image]----

What I want:

-----[ button ]------[ button2 ]----[image]---- For the line since it's custom using hr wasn't enough so I went this route and am using the background of the list of buttons and setting that to look like a dotted line. However I don't want to be able to see the line behind the button and I can see how using the background would be an issue and using a div to create the line could be an alternative but I still wouldn't know how to make the line "disappear" when it's behind a button which happens to have a transparent background.

Quickly tried to reproduce this :

<html>
  <head>
    <style>
      div {
        padding: 10px 50px;
      }

      ul{ 
        display:flex;
      }

      li{
        list-style-type: none;
      }
      
      .dotted-spaced {
        background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
        background-position: center;
        background-size: 10px 1px;
        background-repeat: repeat-x;
      }
      button{
        background-color: rgba(255,255,255,0);
        margin: 0 20px;
      }

    </style>
  </head>
  <body>
    <ul class='dotted-spaced'>
      <li>
       <button>
        Button1
       </button>
      </li>
      <li>
       <button>
        Button2
       </button>
      </li>
    </ul>
  </body>
</html>
css html
1 Answers

This is the only way I can think of. Not the best, but it works. To change the length of the "---", just change the width from 5em to that of your preference. I hope this works for you.

div
{
    padding: 10px 50px;
}

ul
{
    display: flex;
}

li
{
    list-style-type: none;
}

#dotted-one {
    background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
    background-position: center;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    width: 5em;
}

#dotted-two {
    background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
    background-position: center;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    width: 5em;
}

#dotted-three {
    background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
    background-position: center;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    width: 100%;
    margin-right: 50px;
}

button
{
    background-color: rgba(255, 255, 255, 0);
    margin-left: 0.2em;
    margin-right: 0.2em;
}
<ul class='dotted-spaced'>
    <div id="dotted-one">

    </div>
    <li>
        <button>
            Button1
        </button>
    </li>
    <div id="dotted-two">

    </div>
    <li>
        <button>
            Button2
        </button>
    </li>
    <div id="dotted-three">

    </div>
</ul>

user_187759010
Related