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

サンプル１（width:450px）

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

サンプル２（width:350px）

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

サンプル３（width:270px）

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

サンプルのhtmlソース

<section>
    <h3>サンプル１（width:450px）</h3>
    <article>インターネットを利用した受注システムです（SaaS版、ASP版）。既存の販売管理、基幹システムとのデータ連携が可能です。</article>
</section>
<section style="width:350px;">
    <h3>サンプル２（width:350px）</h3>
    <article>インターネットを利用した受注システムです（SaaS版、ASP版）。既存の販売管理、基幹システムとのデータ連携が可能です。</article>
</section>
<section style="width:270px;">
    <h3>サンプル３（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;
  }