CSS疑似要素のレスポンシブ対応のやり方

おはようございます。

前提・実現したいこと

疑似要素(::after)を使って
点線を作っています

画像のようなCSSを実装したいと考えています！（レスポンシブ対応）

発生している問題・エラーメッセージ

一番上の太文字タイトル部分の右にある点線を
レスポンシブ対応にしたいので**::afterにはwidth: 100%**;
を指定し、自動的に長さを変えようと考えています。

しかしそう指定してしまうと、太文字タイトルが押しつぶされてしまいます。

該当のソースコード

HTML
1        <div class="pplIntro__textWrapper">
2          <h4 class="pplIntro__heading">
3            タイトルタイトルタイトルタ<br class="Sp-only"> タイトルタ
4            <span>タイ</span>
5          </h4><!-- /.pplIntro__heading -->
6          <p class="pplIntro__text">
7            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
8            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
9            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
10            <br>
11          </p><!-- /.pplIntro__text -->
12        </div><!-- /.pplIntro__textWrapper -->
13

CSS
1.pplIntro__textWrapper {
2  color: #FFFFFF;
3  max-width: 655px;
4  position: relative;
5  text-align: left;
6  width: 100%;
7}  
8
9.pplIntro__heading {
10  display: flex;
11  flex-grow: 2;
12  font-size: 22px;
13  font-weight: bold;
14  max-width: 655px;
15  margin-bottom: 20px;
16  width: 100%;
17}
18
19.pplIntro__heading::after {
20  background-image: linear-gradient(to right, #ffffff, #ffffff 10px, transparent 4px, transparent 4px);
21  background-size: 15px 4px;
22  background-repeat: repeat-x;
23  content: '';
24  display: inline-block;
25  height: 2px;
26  margin-top: 10px;
27  width: 100%;
28}
29
30.pplIntro__heading span {
31  display: block;
32  font-size: 15px;
33  font-weight: bold;
34}
35

試したこと

::after にwidthを指定しないと表示されなくなってしまって、、
かといって、pxを指定するとレスポンシブで崩れてしまいます！

なにか良い案はないか、教えていただけないでしょうか！
よろしくお願いいたします。

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

回答1件

ベストアンサー

まず、H4内のタイトルをspanタグで囲みます。

html
1        <div class="pplIntro__textWrapper">
2          <h4 class="pplIntro__heading">
3            <span>
4            タイトルタイトルタイトルタ<br class="Sp-only"> タイトルタ
5            <span>タイ</span>
6            </span>
7          </h4><!-- /.pplIntro__heading -->
8          <p class="pplIntro__text">
9            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
10            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
11            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
12            <br>
13          </p><!-- /.pplIntro__text -->
14        </div><!-- /.pplIntro__textWrapper -->

H4の子要素.span にflex-shrink: 0;を設定して縮小しないようにします。
幅は設定せずに(=width: auto) 、本来の幅にします。

あとは、細かい調整をして下記のようなCSSでどうでしょうか。

css
1.pplIntro__textWrapper {
2  color: #FFFFFF;
3  max-width: 655px;
4  position: relative;
5  text-align: left;
6  width: 100%;
7  background-color: #e98467;
8}  
9
10.pplIntro__heading {
11  display: flex;
12  align-items: center;
13  font-size: 22px;
14  font-weight: bold;
15  max-width: 655px;
16  margin-bottom: 20px;
17  width: 100%;
18}
19 .pplIntro__heading > span {
20  flex-shrink: 0;
21}
22
23.pplIntro__heading::after {
24  background-image: linear-gradient(to right, #ffffff, #ffffff 10px, transparent 4px, transparent 4px);
25  background-size: 15px 4px;
26  background-repeat: repeat-x;
27  content: '';
28  display: inline-block;
29  height: 2px;
30  width: 100%;
31}
32.pplIntro__heading > span > span {
33  flex-shrink: 0;
34  display: block;
35  font-size: 15px;
36  font-weight: bold;
37}