Рассчитать высоту псевдоэлемента

208
24 августа 2018, 06:10

Необходимо соединить псевдо-элементы, задать правильную высоту, чтобы не происходило такого: 

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>

Заранее благодарю!

Answer 1

Предлагаю использовать границы

*,: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>

READ ALSO
Как лучше сверстать этот заголовок? [закрыт]
HTML

Как лучше сверстать этот заголовок? [закрыт]

На десктопе расположить не проблемаА вот что бы при уменьшении экрана, он сначала вместе с картинкой сдвигался, а потом вообще на новую строку,...

 200
Глюк Jquery UI tab + yandex map
jQuery

Глюк Jquery UI tab + yandex map

обнаружил старнную ошибку с отображением yandex map на странице при ротации (изменения размера экрана)

 176
Переделать функцию с С++ на C#
c#

Переделать функцию с С++ на C#

Есть функция подсчета Crc8, которая написана на C++ и эту функцию мне нужно перенести на C#

 203
Перемещение юнита по клику (RTS)
c#

Перемещение юнита по клику (RTS)

Пишу свою RTS игру, написал класс юнита, всё работает,но натыкаюсь на такую вот проблему - вся проблема в стандартном Nav Mesh Agent, в котором естественно...

 195