cssで要素が横になるが擬非要素の箇所がはみ出てしまうのを解決したい

現状

このようになってしまい、理想は後ろの背景のなかに擬似要素を持っていきたいと思っています。

コード

.tag_container_sp
  .key_tag_contanier_sp
    button.key_tag_all_sp data-type='keywords' すべてのキーワードから探す
  .key_tag_contanier_sp
    button.key_tag_all_sp data-type='sectors' すべての業界から探す

@media screen and (max-width:1024px) {
  .tag_container_sp {
    display: flex;
    justify-content: space-around;
  }
}

@media screen and (max-width:1024px) {
  .key_tag_contanier_sp {
    display: block;
    margin-bottom: 18px;
    background: rgba(240,215,185,0.5);
    border-radius: 30px;
    box-shadow: 0px 8px 5px -5px rgba(0,0,0,0.5)
  }
}

@media screen and (max-width:1024px) {
  .key_tag_all_sp {
    display: block;
    position: relative;
    display: flex;
    justify-content: center;
    color: #333;
    margin: 0 auto;
    padding: 16px 0;
    font-size: 14px;
    font-weight: bold;
  }
}

.key_tag_all_sp::before, .key_tag_all_sp::after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35px;
  height: 1px;
  background-color: black;
}

.key_tag_all_sp::before {
  left: -45px;
}

.key_tag_all_sp::after {
  right: -45px;
}

どなたかお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

絶対配置をすると通常のフローから外れてしまい、内容物と扱われなくなりますので、絶対配置をやめるのがいいかと思います。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/2hmwLorg/

css
1        @media screen and (max-width:1024px) {
2            .key_tag_all_sp {
3                display: block;
4                position: relative;
5                display: flex;
6                justify-content: center;
7                color: #333;
8                margin: 0 auto;
9                padding: 16px 0;
10                font-size: 14px;
11                font-weight: bold;
12                align-items: center; /* 追加 */
13            }
14        }
15
16        .key_tag_all_sp::before,
17        .key_tag_all_sp::after {
18            content: '';
19            /* position: absolute; 削除 */
20            top: 50%;
21            display: inline-block;
22            width: 35px;
23            height: 1px;
24            background-color: black;
25        }