コース推薦：

AND

レスポンシブなテキスト区切り線を作成する方法

第1ステップ - HTMLを追加：

<div class="divider">Lorem Ipsum</div>

第2ステップ - CSSを追加：
  .divider {
  font-size: 30px;
  クラス設定により、いくつかのスタイルが設定されています。フォントサイズを30ピクセルに設定し、flexレイアウトを使用し、
margin: 5px;
display: flex;
  .divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
margin: 5px;

}

実際に試してみてください

例解：

この例では、CSSを使用してテキスト区切り線を作成する方法を説明します。具体的には、HTMLとCSSの組み合わせでこの効果を実現しています。

まず、HTMLでクラス名「divider」を持つ<div>要素を追加し、そこに表示したいテキスト（この例では「Lorem Ipsum」）を配置する必要があります。 .divider 次に、CSSで、 クラス設定により、いくつかのスタイルが設定されています。フォントサイズを30ピクセルに設定し、flexレイアウトを使用し、 align-items: center;

次に、あなたはテキストを区切り線の中で垂直に中央に配置するために、ペルシバル要素を使用しました。 ::before および ::after 区切り線の両側に装飾を追加するために、この二つのペルシバル要素に flex: 1 それらが占めるように .divider 要素内のテキスト以外のすべてのスペース。あなたは設定しました content: '' この二つのペルシバル要素が空で、どのような内容も含まないことを確認してください。

次に、インセット、背景色、およびマージンを設定して、区切り線のスタイルを定義します。この例では、区切り線の色は赤で、いくつかのインセットとマージンがあります。