「?」を使用せずに CSS のみの改行を作成する方法

CSS のみの改行:
を超えて

追加の HTML タグを導入せずに純粋な CSS で改行を作成するという課題は、困惑する開発者たち。これは、要素のインライン配置を維持しながら、

などの特定の要素の後で改行が必要な場合に特に適切です。

CSS ソリューション

幸いなことに、賢い CSS 回避策を使用すると、この望ましい効果を実現できます。 display: inline プロパティを利用し、要素のコンテンツと空白のプロパティを操作することにより、ターゲット要素の後に特に改行を導入できます。

<code class="css">h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}</code>

このコードでは、display: inline プロパティ

が確実に要素は同じ行に残ります。改行の鍵は :after 疑似要素にあります。その内容を改行を表す ASCII 文字 a に設定し、その空白を pre に設定すると、

の後に強制的に改行が入ります。

動作例

次の HTML について考えてみましょう。

<code class="html"><li>
  Text, text, text, text, text. <h4 id="Sub-header">Sub header</h4>
  Text, text, text, text, text.
</li></code>

上記の CSS をこの HTML に適用すると、

の後にのみ改行が発生します。

<code class="css">li h4 {
  display: inline;
}
li h4:after {
  content: "\a";
  white-space: pre;
}</code>

結論

この CSS テクニックは、インライン要素の後でも、純粋な CSS で改行を実装するための信頼できる方法を提供します。これは、HTML の変更が不可能なシナリオに望ましいソリューションを提供します。

以上が「?」を使用せずに CSS のみの改行を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。