It is necessary to connect pseudo-elements, set the correct height so that this does not happen: enter image description here enter image description here

body { background: #000; } div.content { opacity: 1 !important; text-align: left !important; transition: .25s; } div.content h2 { color: #fff; font-family: 'GilroyB', sans-serif; font-size: 24px; margin-left: 20%; text-transform: uppercase; margin-bottom: 40px; } div.content div.horizontalLine { position: absolute; content: ''; width: 5%; height: 2px; margin-left: 14%; margin-top: 10px; background: #e74b4c; } div.content div.verticalLine { position: absolute; content: ''; width: 2px; margin-top: 10px; height: 30%; left: 0; margin-left: 14%; background: #e74b4c; } div.content p { color: #fff; font-family: 'GilroyL', sans-serif; margin-left: 25%; font-size: 16px; margin-bottom: 10px; } div.content p:before { content: ''; width: 15px; height: 2px; background: #e74b4c; position: absolute; margin-left: -25px; margin-top: 10px; } div.content a.go { margin-left: 20%; padding: 10px 20px; background: #e74b4c; font-family: 'GilroyL', sans-serif; font-size: 20px; text-transform: uppercase; text-align: center; color: #fff; text-decoration: none; margin-top: 40px; display: inline-block; } div.content a.go:before { content: ''; height: 2px; position: absolute; left: 14%; margin-top: 10px; width: 7.5%; background: #e74b4c; } div.content a.price { text-decoration: none; margin-left: 10%; padding: 5px 20px; background: #e74b4c; font-family: 'GilroyL', sans-serif; font-size: 20px; text-transform: uppercase; text-align: center; color: #fff; margin-top: 40px; display: inline-block; } div.content a.price:before { content: ''; height: 2px; position: absolute; left: 40%; margin-top: 10px; width: 27.5%; background: #e74b4c; z-index: -1; } 
 <section class="offer"> <div class="slider-offer owl-carousel"> <div class="slide text-center"> <img src="img/Offer-Page/Business.png" alt=""> <div class="content"> <div class="verticalLine"></div> <div class="horizontalLine"></div> <h2>Бизнес решение</h2> <p>Все что у "Старт"</p> <p>Премиум поддержка, обслуживание</p> <p>Яндекс Директ</p> <p>SEO</p> <a class="go" href="#">ПОЕХАЛИ!</a> <a class="price" href="#">150.000р</a> </div> </div> <div class="slide text-center"> <img src="img/Offer-Page/Maybach.png" alt=""> <div class="content"> <div class="verticalLine"></div> <div class="horizontalLine"></div> <h2>Полный фарш</h2> <p>Все что у Bisiness</p> <p>Составление продажных скриптов, построение отдела продаж</p> <p>Индивидуальные доработки</p> <a class="go" href="#">ПОЕХАЛИ!</a> <a class="price" href="#">300.000р</a> </div> </div> <div class="slide text-center"> <img src="img/Offer-Page/Renault.png" alt=""> <div class="content"> <div class="verticalLine"></div> <div class="horizontalLine"></div> <h2>Старт</h2> <p>Полноценный сайт со всем функционалом</p> <p>Обучение пользованием сайта</p> <p>Хостинг</p> <a class="go" href="#">ПОЕХАЛИ!</a> <a class="price" href="#">50.000р</a> </div> </div> </div> </section>

Thank you in advance!

    1 answer 1

    I suggest using borders

     *,:before,:after{ box-sizing:border-box; } body{ margin:0; } .content{ max-width:300px; border-left:2px solid red; border-bottom:2px solid red; margin:20px; padding:0 0 0 20px; } .content h2{ position:relative; margin:0; line-height:1; bottom:.5em; } .content h2:before{ content:''; display:block; position:absolute; right:100%; top:calc(50% - 1px); width:22px; border-top:2px solid red; } ul{ list-style:none; margin:0; padding:0; } li:before{ content:'- '; color:red; } .content__footer{ position:relative; top:14px; display:flex; justify-content:space-between; } .btn{ display:inline-block; background-color:red; color:white; line-height:1.5; padding:0 5px; text-decoration:none; } 
     <div class="content"> <h2>Полный фарш</h2> <ul> <li>Все что у Bisiness</li> <li>Составление продажных скриптов, построение отдела продаж</li> <li>Индивидуальные доработки</li> </ul> <div class="content__footer"> <a class="btn" href="#">ПОЕХАЛИ!</a> <a class="btn" href="#">300.000р</a> </div> </div>