テキストの両側に水平線を描くための CSS のサンプルコード

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さんと共有します。具体的な注意事項は次のとおりです。

効果:

<!doctypehtml>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="ビューポート"
          コンテンツ="幅=デバイス幅、ユーザースケーラブル=いいえ、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        。タイトル{
            テキスト配置: 中央;
            位置: 相対的;
            高さ: 50px;
            行の高さ: 50px;
            幅: 800ピクセル;
            マージン: 200px 自動;
        }
        .title:後、.title:前{
            コンテンツ: "";
            位置: 絶対;
            上位: 50%;
            背景: #7a7a7a;
            高さ: 1px;
            幅: 35%;
        }
        .title:後{
            左: 0;
        }
        .title:前{
            右: 0;
        }
    </スタイル>
</head>
<本文>
    <div class="title">テキストの中央の両側に水平線を表示する効果を実現する CSS</div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Dockerコンテナイメージからコードを復元する手順

>>:  Hタグはウェブページ制作において適切に使用すべきである

推薦する

React setStateデータ更新メカニズムの詳細な説明

目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...

Docker での Redis の永続ストレージの詳細な説明

この章では、dockerの下にあるSpring BootプロジェクトでRedisを操作し始めます。準...

Docker コンテナ アプリケーションで避けるべき 10 の悪い習慣

コンテナが企業の IT インフラストラクチャに欠かせない要素となっていることは間違いありません。コン...

ReactでCSSスタイルを動的に変更する2つの方法の詳細な説明

最初の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするクラスを動的に追加します...

MySQL マスター/スレーブ ステータスを監視するシェル スクリプト

Linuxでシェルスクリプトを共有して、MySQLのマスタースレーブ状態を監視し、エンタープライズW...

Linux は n 日前のログとサンプルコマンドを自動的に削除します

1. ファイル削除コマンド:対応するディレクトリを検索します -mtime + 日数 -name &...

MySQL ストアド プロシージャ関連の権限変更の問題

MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...

show processlist コマンドによる MySQL パフォーマンス検査の説明

show processlist コマンドは非常に便利です。MySQL の実行が 50% 以上になる...

vue3 テレポートの詳細な使用例

公式ウェブサイトhttps://cli.vuejs.org/ja/ガイド/場合によっては、コンポーネ...

Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告

Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

MySQL の「特殊キーが長すぎます」の解決策

目次解決策1解決策2テーブルを作成するときに、興味深い問題に遭遇しました。「指定されたキーが長すぎま...

MySQL における explain の役割の詳細な説明

1. MYSQLインデックスインデックス: MySQL がデータを効率的に取得するのに役立つデータ構...

LinuxのCentos7でmysql5.7.29を構築する詳細なプロセス

1. MySQLをダウンロードする1.1 ダウンロードアドレスhttps://downloads.m...