Hide the border when div is on top

Question

I am using the following html and css to design a div with a title and a button at bottom:

.main-container {
  height          : 100%;
  width           : 100%;
  position        : absolute;
  background-size : 100% 100%;
  display         : flex;
  align-items     : center;
  background-color: lightgreen;
}

.content{
  margin:auto;
  border: 1px solid #0d0d63;
  padding: 10px;
}
.title{
  top: -21px;
  position: relative;  
  border-bottom: 1px solid green;
}
.bottom-link{
  position:relative;
  top:19px;
  background-color:green;
}

 <div class="main-container">      
        <div class="content">
          <div class="title">My Title</div>
            test content
          <div class="bottom-link">Bottom Link</div>
        </div>      
    </div>

As you can see the title is crossed out because of the border. I can fix it by setting the background color to title class like I did for bottom-link. But the issue is I want the background-color ( or image if I add one) of the main-container to be visible throught the title. ie; I need the title div to be transparent. Is there any way to achieve this with css?

score 1 · Answer 1 · answered Aug 07 '21 at 07:01

You can remove border top and give title ::before and ::after border bottom to get what you want

.main-container {
  height          : 100%;
  width           : 100%;
  position        : absolute;
  background-size : 100% 100%;
  display         : flex;
  align-items     : center;
  background-color: lightgreen;
}

.content{
  margin:auto;
  border: 1px solid #0d0d63;
  border-top: none;
  /* padding: 10px; */
}

.second-content{
  padding: 10px;
}

.title{
  top: -10px;
  position: relative;  
  /* border-bottom: 1px solid green; */
}
.bottom-link{
  position:relative;
  top:19px;
  background-color:green;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #0d0d63;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

 <div class="main-container">
  <div class="content">
    
    <div class="title separator">My Title</div>
    <div class="second-content">
      test content
    <div class="bottom-link">Bottom Link</div>
    </div>
  </div>      
</div>

I still need the under line for the title and it should cover only the text. — Ragnar, Aug 07 '21 at 08:02
Also the title text will be dynamic, so can't used fixed length for the :before and :after elements — Ragnar, Aug 07 '21 at 08:04
yeah this isn't perfect solution, I hope you find better solution from anyone else — Red Headphone, Aug 07 '21 at 17:09

Hide the border when div is on top

1 Answers1