CSSだけで、折り返したテキストの最後の行だけにアンダーラインを付けます。子要素が並んで行を形成している場合は、「:last-child疑似クラス」を使って最後の行(要素)にのみにアンダーラインを付けることができますが、ひとつの要素の折り返しによる複数行の場合は、「:last-child疑似クラス」は使えません。そこで、「:after疑似要素」を使ってアンダーラインを追加します。 サンプルは、同じテキストを使い、3種類の幅で表示しています。

サンプル1(width:450px)

インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。

サンプル2(width:350px)

インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。

サンプル3(width:270px)

インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。

サンプルのhtmlソース

<section>
    <h3>サンプル1(width:450px)</h3>
    <article>インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。</article>
</section>
<section style="width:350px;">
    <h3>サンプル2(width:350px)</h3>
    <article>インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。</article>
</section>
<section style="width:270px;">
    <h3>サンプル3(width:270px)</h3>
    <article>インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。</article>
</section>

サンプルのCSSソース

section {
  position: absolute;
  top: 80px;
  left: 50%;
  width: 450px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  position: relative;
  padding-bottom: 30px;
  padding-top: 2px;
  letter-spacing: -1px;
  }
article {
  text-transform: none;
  font-size: 22px;
  line-height: 27px;
  }
article:after {
  content: "\feff";
  line-height: 27px;
  border-bottom: 3px solid #588;
  display: inline;
  width: 100%;
  margin-left: -100%;
  position: absolute;
  }

 

引用と参考;https://codepen.io/smlsvnssn/pen/HaDAu
戻るボタン