おしゃれな見出し【エンドフィールド】

<div class='headline_bar'>
:before
:after
</div>

<style>
.headline_bar {
  display: flex;
  width: 100%;
  height: 1.125rem;
  position: absolute;
  top: 2rem;
  left: 0;
}
.headline_bar:before {
  content: '';
  display: block;
  width: calc(50% - 47.5rem);
  height: 100%;
  background-color: #141414;
}
.headline_bar:after {
  content: '';
  display: block;
  height: 100%;
  opacity: 0.6;
  flex: 1 1;  // after要素にはWidthを指定していないので、これがないとWidth:auto（つまり0）になって消えます
              // flex: 1 1;は以下と同じ意味です
              // flex-grow: 1;　空いてるスペースを広がる
              // flex-shrink: 1; 余裕がなければ縮む
              // flex-basis: 0; 基準幅は0
              // Widthを可変にしたいときはflexを使います
  background-image: linear-gradient(
    -45deg,  // グラデーション方向を左上から右下にする
    #0000,  // 透明
    #0000 20%,  // 20％までは透明
    #000 0,  // 直後に黒
    #000 30%,  // 30%までは黒
    #0000 0,  // 再び透明に変わり
    #0000 70%,  // 70%までは透明
    #000 0,  // 再び黒に変わり
    #000 80%,  // 80％までは黒
    #0000 0,
    #0000  // 以降は透明
  );
}
</style>