CSSを使用して項目のリスト間にカンマを動的に追加するにはどうすればよいですか?

複数の項目を含むリストは Web サイトで頻繁に使用され、カンマで区切ることで読みやすさとユーザー エクスペリエンスを向上させることができます。リストにカンマを追加する従来の方法は、カンマを手動で追加することです。ただし、すでにご想像のとおり、これは、特に長いリストの場合、困難で時間のかかるプロセスになる可能性があります。幸いなことに、CSS を使用して項目のリストにカンマを動的に追加できる機能は、優れたソリューションです。

~ セレクター

CSS では、~ セレクターは、HTML DOM 内の必要な要素の前にあるすべての要素を選択するために使用されます。

语法

リーリー

このコンテキストでは、「el1」は他のコンポーネントの前のコンポーネントを表し、「el2」は共有の親ユニットにある後続の他のコンポーネントを表します。

たとえば、~ ul はすべての

を選択します。 が前にある要素要素。＃＃＃

::前选择器

::before セレクターは、選択した要素の前にコンテンツを挿入するために使用されます。

语法

リーリー

ここで、el は ::before 疑似要素が適用される要素です。 ::before 擬似要素の前には 2 つのコロン (::) が付き、:before 擬似クラスと区別します。:before 擬似クラスは、下位互換性のためにまだサポートされている古い構文です。

たとえば、p::before

要素の前にコンテンツを追加します。

方法

CSS を使用して項目のリスト間にカンマを動的に追加する方法には、選択した要素の前にコンテンツを挿入できる ::before と呼ばれる疑似要素の使用が含まれます。この場合、ul リスト内の li 要素をターゲットにし、::before セレクターを使用して各要素の前にコンマを追加します。この方法を使用すると、リストにカンマを手動で追加する必要がなくなり、CSS を使用してプロセスを自動化できます。さらに、display プロパティと flex-wrap プロパティを使用してリスト項目を配置し、必要に応じて確実に新しい行に折り返すことができます。最後に、JavaScript を使用してリスト項目を動的に追加および削除できます。

例

の中国語翻訳:

例

以下のコードは、一連のアイテムの間に CSS を使用して、自動的に追加番号を追加します。リスト目的の div ボックスを追加および削除します。 サンプル形式のボックスには、各リスト テーブルの前 (最初の 1 つを除く) に要素番号とスペースが追加されます。文本「Item!」の新しいリストリスト、removeItem 関数は自動的にリストリストを 1 つ選択し、それを削除します。 リーリー

结论
さらに、CSS を利用して文章中に自動的に番号を含めることは、ネットワークの可用性と視覚的魅力を高めるための方策の 1 つです。関心のある問題を発表し、新たな可能性を模索することによって、CSS の強力な力を利用して、人の興味をそそり、感動を与える素晴らしいウェブデザインを構築することができると考えられています。

利用可能なさまざまなツールやテクニックを徹底的に検討し、重要なネットワークを公開して企業の知識のすべてを公開しています。

以上がCSSを使用して項目のリスト間にカンマを動的に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。