Good afternoon, how to make a frame on the right. That's what I need to do, I was told through the pseudo-element :: after enter image description here

I did it like this:

banner::after, .transport-banner::after { content: ""; border-right: 1px solid #e4e2df; position: relative; top: -40px; left: 100px; }

enter image description here

    2 answers 2

     .banner { position: relative; width: 200px; height: 100px; } .banner::after { display: block; width: 100%; /*какую высоту выставим, такого размера и будет бордер*/ height: 50px; content: ""; border-right: 1px solid black; position: absolute; /*а top-OM уже выставлять положение бордера*/ top: 25px; left: 0; } 
     <div class="banner">banner</div> 

       введите сюда код 

       .some-banner{ display: flex; } .banner-item{ position: relative; padding: 20px; } .banner-item:after{ content: ''; display: block; border-right: 2px solid red; height: 60px; position: absolute; top: 50%; margin-top: -15px; right: -1px; } /* .banner-item:not(:last-child):after{ Если нужно без последнего after content: ''; display: block; border-right: 2px solid red; height: 60px; position: absolute; top: 50%; margin-top: -15px; right: -1px; } */ 
       <div class="some-banner"> <div class="banner-item"> <img src="https://i.mycdn.me/i?r=ATFH4yR_3Vo7iU_-nD1bYWeeCGRm3fig_cX1pJkGgx7jKyCCDx6H11LRhpoEs4OYJOQ" alt=""> </div> <div class="banner-item"> <img src="https://i.mycdn.me/i?r=ATFH4yR_3Vo7iU_-nD1bYWeeCGRm3fig_cX1pJkGgx7jKyCCDx6H11LRhpoEs4OYJOQ" alt=""> </div> <div class="banner-item"> <img src="https://i.mycdn.me/i?r=ATFH4yR_3Vo7iU_-nD1bYWeeCGRm3fig_cX1pJkGgx7jKyCCDx6H11LRhpoEs4OYJOQ" alt=""> </div> </div>