要素の幅いっぱいに下線 点線を引きたい

Question

下の画像のように点線を引きたいです。

僕は以下のようにHTML cssを書きました。

<div class="letter_ps_wrap">
  <p class="letter_ps"><span class="letter_ps__large">追伸：</span><br>                        
     最後に、断言しておきます。<br>    
     わずか12か月の間に、これだけの<span class="letter_ps__warning">車検台数を成功確率100%で増やせるのは、私達だけ</span>です。<br>    
      類似の車検FCの加盟店実績と見比べてみてください。<br>    
     私達XXXの加盟店は商圏や立地に違いがあっても、<span class="letter_ps__warning">加盟店の８３％が年間車検台数1,000台<br>を越えています。</span>こんな実績があるのは私達だけです。<br>    
     もし、あなたが車検台数を増やして地域で信頼させる繁盛店を目指しているなら、まずは<span class="letter_ps__warning">説明会に<br>
     お越しください。</span><br>    
     なお、XXXに加盟できる地域は次々と埋まってきておりますので、目の前のチャンスを逃さない<br>ようにご注意ください。  
 </p>
</div>

            .letter_ps_wrap{
                background-color: #fffdeb;
                box-shadow:  5px 5px 10px 0 grey;
                transform: rotate(-3deg);
                .letter_ps{
                    font-size: 21.44px;
                    letter-spacing: 0.1em;
                    line-height: 2.576;
                    padding: 40px 70px 50px;
                    text-align: left;
                    text-decoration:underline dotted;
                    font-weight: bold;
                    .letter_ps__large{
                        font-size: 44px;
                    }
                    .letter_ps__warning{
                       color: $secondary_base;
                    }
                    
                }
            }

結果は　以下の画像のようになっています。

文字の幅の分しか点線が引かれていないのと、文字と点線の間の間隔が取れていません。
どうすれば、見本のように要素全体に点線が引けて、文字と点線の間の間隔が取れるようにできるのでしょうか?

Answer 1

background-image にCSSグラデーションで描画することで実現できます。
下記リンクが参考になるでしょう。

CSSのみで罫線(点線と実線)を引いたノートのようなデザインを作る | 失敗から学ブログ

サンプルを作成してみましたので、ご参考に。

CodePenサンプル

Comments

[Fukusuke0604]

ありがとうございます。「ノートのようなデザイン CSS」 で検索すればいろいろ出てきて、それらを参考に意図したデザイン仕上げられました。

検索の際のワードもいろいろ試せるようにします!!

ありがとうございました。