提供したコンテンツに適したタイトルのオプションをいくつか示します。 オプション 1 (挑戦に焦点を当てる): 余分な HTML を使用せずに、両側に水平線を入れて見出しを中央に配置する方法 オプション 2 (ソリューションに焦点を当てる)

両側に水平線のある見出し

この質問では、両側に垂直方向の中央に水平線を配置したページ タイトル (見出し) を作成するという課題について説明します。目標は、余分な HTML を追加せずに、ページ上の背景画像を考慮しながらこの効果を実現することです。

考えられる解決策

CSS:

<code class="css">h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}</code>

HTML:

以上が提供したコンテンツに適したタイトルのオプションをいくつか示します。 オプション 1 (挑戦に焦点を当てる): 余分な HTML を使用せずに、両側に水平線を入れて見出しを中央に配置する方法 オプション 2 (ソリューションに焦点を当てる)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。