テキストが重ならない、水平バーを使用したエレガントな中央揃えの見出しを作成する方法

水平バーを使用したエレガントな見出し

両側に水平バーを備えた中央揃えの見出しを作成する場合、バーが交差しないようにするのが難しい場合があります。テキスト。純粋な CSS を使用してこの効果を実現するソリューションは次のとおりです。

ソリューションの概要

このメソッドは、疑似要素を利用して水平バーを作成し、それらを相対的な特定の位置に配置します。テキストに。さらに、テキストが存在するバーを非表示にするために、バーの 1 つに負のマージンがオーバーフローとともに適用されます。

実装

このソリューションを実装するには、次の手順を実行します。これらの手順:

1. 見出しに対して次の CSS ルールを定義します:

<code class="css">h1 {
    position: relative;  
    font-size: 30px;  
    z-index: 1;
    overflow: hidden;
    text-align: center;
}</code>

このルールは見出しの位置を決め、フォント サイズを指定し、オーバーフローの非表示を有効にします。

2. バーの疑似要素を作成します:

<code class="css">h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}</code>

これらの疑似要素は、特定の幅と高さで見出しの中央に配置されます。水平バーとして機能します。

3. 左バーをオフセットして整列します:

<code class="css">h1:before {
    margin-left: -50%;
    text-align: right;
}</code>

このルールは、左バーに負のマージンを適用して整列させ、確実に配置します。

これらの CSS ルールを実装すると、追加の HTML 要素を含めることなく、水平バーがテキストを横切ると消える中央揃えの見出しを簡単に作成できます。

以上がテキストが重ならない、水平バーを使用したエレガントな中央揃えの見出しを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。