賢威の記述リストデザインその１の下線を消す

賢威には、次のような「記述リストのデザインその1」が用意されています。

記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。

このリストデザインを、ボックス内に記述すると、

【例】

記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。

にゃのらいと

ボックスの線もあるから、２番目（一番下）の下線は消したいにゃ

そんな悩みを解決するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.2
PHPバージョン：7.4
サーバー：さくらインターネット

記述リストデザインその１の下線を消すCSS

「記述リストデザインその１」の下線を消すCSSです。

.dl_style01 dd.not-border {
border-bottom: 0;
}

ddに対して、クラスnot-borderを付与する事で、下線を消すことができます。

<dl class="dl_style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd class="not-border">要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
</dl>

「記述リストデザインその１」の下線を消すCSS