flexで横並びにした要素の一部分だけを横幅いっぱいに広げたい

Question

前提・実現したいこと

タイトルボックスをflexで2列の横並びにしています。
ここのボーダーだけを常にブラウザの横幅いっぱいに広げたいのですが、どうしてもうまくいきません。

横幅は可変で指定しており、指定を外すとボーダーは横幅いっぱいになるのですが、代わりにタイトル位置がずれてしまってデザイン通りになりません。
ボーダーだけを横幅いっぱいにする方法はないでしょうか？

該当のソースコード

.index {
  position: relative;
  display: flex;
  margin: 0 auto;
  max-width:1200px;
}

.index >div {
  width: 50%;
}

.index div ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.index div ul li {
  width: 41%;
  margin: 2%;
  height: 180px;
  line-height: 180px;
  background: #000;
  text-align: center;
  list-style: none;
}

h3.border {
  position: relative;
  padding: 0 65px;
  text-align: center;
  font-size: 20px;
  font-weight:normal;
}

h3.border:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #993333;
}

h3.border span {
  position: relative;
  display: block;
  width: 200px;
  padding: 20px 0;
  margin: 0 auto;
  background: #000;
  color: #fff;
  border: 1px solid #993333;
}

 <div class="index">
    <div>
      <h3 class="border">タイトル</h3>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div>
      <h3 class="border">タイトル</h3>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

試したこと

max-width指定を外す→
指定しないとタイトル位置がずれてしまう。

spanやpなどでborderを別に作り、absoluteで重ねる→
うまくいきませんでした。

Answer 1

多少乱暴な方法でも良いのであれば、borderのあるbefore疑似要素の位置を画面外に配置するという方法で実現できるかと思います。

body{
  /* 横幅いっぱいに広げたborder部分がはみ出した領域をスクロールさせない */
  overflow-x: hidden;
}

h3.border:before {
  position: absolute;
  top: calc(50% - 1px);
  /* 左端と右端を画面外へ吹っ飛ばす */
  left: -100vw;
  right: -100vw;
  height: 2px;
  content: '';
  background: #993333;
}

単純に画面外へborderの端を吹き飛ばすと画面が横方向へスクロールするので、bodyのoverflow-xで横方向スクロールを抑止しています。

codepenでのデモ

Comments

[mupo]

コメントありがとうございます。こちらの方法でもうまくできました！複数のやり方がわかり勉強になります。ありがとうございました。

[hope_mucci]

Lhankor_Mhyさんのコメントでも触れさせていただきましたが、フレックスボックス中のposotion:relativeにボーダー配置調整以外の意味があるとrelativeを削除できなくなるかと思います。position:relativeを全削除しても問題なければLhankor_Mhyさんの案のほうが安全かもしれません。
私の案は親要素にrelativeが必要でも使えます。横スクロールできなくなるところだけは留意してください。

Answer 2

フレックスレイアウトと絶対配置の静的位置を利用してみるのはどうでしょう？
以下のようにするとどうなりますか？

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

.index {
	/* position: relative; 削除 */
	display: flex;
	margin: 0 auto;
	max-width: 1200px;
}

/* ... */

h3.border {
	/* position: relative; 削除 */
	padding: 0 65px;
	text-align: center;
	font-size: 20px;
	font-weight: normal;
	display: flex; /* 追加 */
	align-items: center; /* 追加 */
	justify-content: center; /* 追加 */
}

h3.border::before {
	position: absolute;
	/* top: calc(50% - 1px); 削除 */
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #993333;
}

Comments

[mupo]

コメントありがとうございます。デザインがずれることなくボーダーが横幅になりました！
フレックスレイアウトと絶対配置の静的位置について詳しく調べてみたいと思います。本当にありがとうございました。

[Lhankor_Mhy]

お役に立てたようで何よりです。

[hope_mucci]

position: relativeを削る副作用が気になりますが、borderのためにrelativeを入れていて他の表示に影響がなければ、この方法が一番まっとうだと思います。
（この方法はタイトル以外のposition:relativeを全部削除することでh3.border::beforeについたabsoluteの起点がbodyになるのでleft:0で画面端にborderを動かすことができるようになっています）

[Lhankor_Mhy]

> relativeを削る副作用が気になり

そこなんですよね。
とりあえず、見えてるものだけで判断しました。

Answer 3

max-width指定を外す→

指定しないとタイトル位置がずれてしまう。

普通にこれで問題ないと思います
あえて言えば「body{margin:0px}」はつけておいたほうがよいですが

Comments

[mupo]

コメントありがとうございました。