0

подскажите как можно растянуть полоски возле заголовка на всю ширину контейнера + так чтобы края закругленные оставались видны

Пробовал разное но так и не смог добиться, последний код залил

https://jsfiddle.net/924z8n6c/

Или может вообще как то по другому сделать

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 

    <section class="why_we">

        <div class="container">
            <h2 class="section_title">
                <span>Почему мы?</span>
            </h2>

         
        </div>

    </section>


</body>
</html>
body {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background-color: #000;
    font-size: 15px;
    padding: 0;
    margin: 0;
}

.container {
    width: 1140px;
    margin: 0 auto;
}


.section_title {
    margin-bottom: 100px;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    width: 100%; 
    text-transform: uppercase;
}

.section_title > span {
    position: relative;
    padding: 0 15px;
    display: inline-block;
}

.section_title > span:before, .section_title > span:after {
    content:"";
    width: 100%; 
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -5px;

    border-radius: 30px;
    background-color: #0dadb3;
    box-shadow: 0px 0px 25px 2px rgb(13 173 179);
    height: 10px;
}

.section_title > span:after {
    left: 100%;
}

 

/* 992px - 1200px */
@media screen and (max-width: 1200px) {
    .container {
         width: 960px;
    }
 
 
}


/* 768px - 992px */
@media screen and (max-width: 992px) {
    .container {
        width: 720px;
   }
  
}


/* 576px - 768px */
@media screen and (max-width: 768px) {
    .container {
        width: 540px;
    }
 
}


/* 320px - 576px */
@media screen and (max-width: 576px) {
    .container {
         width: 90%;
    }   
 
 
}

1 ответ 1

2

Пример

body {
  padding: 1rem;
  margin: 0;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  background-color: #000;
}



.section_title {
  margin-bottom: 100px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.section_title:before,
.section_title:after {
  content: "";
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  border-radius: 30px;
  background-color: #0dadb3;
  box-shadow: 0px 0px 25px 2px rgb(13 173 179);
  height: 10px;
}

.section_title:before {
  margin-right: 15px;
}

.section_title:after {
  margin-left: 15px;
}

.section_title>span {
  position: relative
}
<h2 class="section_title">
  <span>Почему мы?</span>
</h2>

3
  • Спасибо, проблему решило. Но не уверен что правильно понял логику решения. 25 июн 2022 в 12:38
  • Я правильно понял что заголовок становится флексом, псевдоэлементы мы считаем блоками и из за того что флекс он их автоматом раскидывает по сторонам? 25 июн 2022 в 12:39
  • 1
    @metamorfoza да
    – soledar10
    25 июн 2022 в 15:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.