It is necessary to hide the line in a semicircle, but not filling it with white. How to do it? I tried to add lines through before and after absolutely 50% of the width, but this is adaptive, at different resolutions a line of different length was obtained.

.complex { padding: 100px 0; } .line-box { border-bottom: 2px solid #3962b5; position: relative; } .ico-complex-box { width: 130px; height: 130px; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; background-color: transparent; } .ico-complex-box:before { content: ""; width: 130px; height: 130px; top: 0; right: 0; border-radius: 50%; border: 2px solid #3962b5; position: absolute; clip: rect(auto, auto, 65px, 65px); } .ico-complex-box:after { content: ""; width: 130px; height: 130px; border-radius: 50%; border: 1px solid #3962b5; position: absolute; top: 0; left: 0; clip: rect(auto, 65px, 65px, auto); } 
 <section class="complex"> <div class="top-line-box"> <div class="line-box"> <div class="ico-complex-box"> </div> </div> </div> </section>

    1 answer 1

     .complex { padding: 100px 0; } .line-box { position: relative; } .line-box:before, .line-box:after { content: ''; display: block; height: 2px; width: calc(50% - 65px); background: #3962b5; position: absolute; bottom: 0; } .line-box:after { right: 0; } .ico-complex-box { width: 130px; height: 130px; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; background-color: transparent; } .ico-complex-box:before { content: ""; width: 130px; height: 130px; top: 0; right: 0; border-radius: 50%; border: 2px solid #3962b5; position: absolute; clip: rect(auto, auto, 65px, 65px); } .ico-complex-box:after { content: ""; width: 130px; height: 130px; border-radius: 50%; border: 2px solid #3962b5; position: absolute; top: 0; left: 0; clip: rect(auto, 65px, 65px, auto); } 
     <section class="complex"> <div class="top-line-box"> <div class="line-box"> <div class="ico-complex-box"> </div> </div> </div> </section>

    • Thank! Exactly what is needed. - Alexander