Apply border that changes color depending on the background color it's applied at

Question

I need to implement the following. A title with a vertical line which crosses over below (or above) the next container element.

I tried an approach using the :after pseudoselector but I can't achieve all the requirements:

1. The line's color should change (and should be customizable independently by CSS) when it's over or under the next element
2. The title with the line should be possible to be placed inside the box that leads in the next section (see prototype below)

Could you suggest some sustainable and scalable solutions? (I am thinking: svg?)

---

here's my non-working prototype:

 .title-with-stripe { position: relative; margin-bottom: 50px; text-align: center; } .title-with-stripe:after { border-left: 1px solid rgba(0, 0, 0, 0.7); position: absolute; content: ''; height: 100px; top: 110%; left: 50%; } .box { background: red; color: white; padding: 50px 0; } .box-info { background: green; padding: 50px 0; } 

 <p class="title-with-stripe">Companies</p> <div class="box">the line in here should change color, and ideally we can define that color <p class="title-with-stripe">Contact info</p> </div> <div class="box-info">half of the line should spill in here</div> 

Answer 1

A combination of before , after , and opacity would work, although it's not the most elegant of codes.

 .title-with-stripe { position: relative; margin-bottom: 50px; text-align: center; } .title-with-stripe:before { border-left: 1px solid rgba(0, 0, 0, 0.7); position: absolute; content: ''; height: 50px; top: 110%; left: 50%; } .title-with-stripe:after { border-left: 1px solid #BADA55; position: absolute; content: ''; height: 50px; top: calc(110% + 50px); left: 50%; } .box { background: red; color: white; padding: 50px 0; } 

 <p class="title-with-stripe">Companies</p> <div class="box">the line in here should change color, and ideally we can define that color</div> 

Answer 2

I would recommend putting the line above the rest and using mix-blend-mode:

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

This will cause the line to take some considerations about the colors behind in order to determine the final colour.

Answer 3

In my answer earlier I commented "I would do it in another way", here's what I meant:

 .title-with-stripe { position: relative; text-align: center; } .box { background: red; color: white; } .box-info { background: green; } .stripe-bottom { position: relative; padding-bottom: 50px; } .stripe-bottom:after { content: ""; display: block; height: 50px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; } .stripe-top { position: relative; padding-top: 60px; } .stripe-top:before { content: ""; display: block; height: 50px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; } .type1:after, .type1:before { background: #CF4D2B; } .type2:after, .type2:before { background: green; } .type3:after, .type3:before { background: blue; } .type4:after, .type4:before { background: orange; } p { margin: 0; } 

 <p class="title-with-stripe stripe-bottom type1">Companies</p> <div class="box stripe-top type2">the line in here should change color, and ideally we can define that color <p class="title-with-stripe stripe-bottom type3">Contact info</p> </div> <div class="box-info stripe-top type4">half of the line should spill in here</div>