CSS dl dt dd 横並び下線

CSS dl dt dd 水平下划線の實現方法

この記事では、CSS を使用して定義リスト (dl dt dd) 要素に水平下線を追加する方法について説明します。2 つの一般的な方法とサンプルコードを紹介します。

border-bottom 属性を使用した下線の追加

border-bottom 属性は、要素の下側に罫線を設定するために使用できます。この属性を使用して、dt 要素または dd 要素に下線を簡単に追加できます。


<style>
dt {
  border-bottom: 1px solid #ccc; /* 下線のスタイルを設定 */
  padding-bottom: 5px; /* 下部の内側余白を追加 */
}
</style>

上記コードでは、border-bottom 属性を使用して、dt 要素の下側に 1px の実線の灰色の罫線を設定しています。また、padding-bottom 属性を使用して、下線とテキストの間に少しスペースを追加しています。

プロパティ	説明
`border-bottom-width`	下線の太さを設定します。
`border-bottom-style`	下線のスタイルを設定します (例: solid, dashed, dotted)。
`border-bottom-color`	下線の色を設定します。

::after 擬似要素を使用した下線の追加

CSS 擬似要素 ::after を使用すると、要素の内容の後にコンテンツを挿入できます。この機能を利用して、dt 要素または dd 要素の後に下線を追加することもできます。


<style>
dt::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 5px; /* 下線とテキストの間隔を設定 */
}
</style>

上記コードでは、dt::after 擬似要素を使用して、dt 要素の後に空のコンテンツを挿入しています。display: block を設定することで、このコンテンツをブロックレベル要素として表示し、幅と高さを指定して下線としています。background-color 属性で下線の色を設定し、margin-top 属性でテキストとの間隔を調整しています。

まとめ

この記事では、CSS を使用して定義リスト (dl dt dd) 要素に水平下線を追加する 2 つの方法を紹介しました。開発者は、実際のニーズに応じて適切な方法を選択できます。

CSS dl dt dd 水平下划線の實現方法

border-bottom 属性を使用した下線の追加

::after 擬似要素を使用した下線の追加

まとめ

関連QA