Растянуть полоски возле заголовка в псевдоэлементах

Question

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

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

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%;
    }   
 
 
}

Answer 1

Пример

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>

БЛОГ НА HUSL

Растянуть полоски возле заголовка в псевдоэлементах

Ответы (1 шт):