テキストを横切るときに水平線が消える中央揃えの見出しを作成する方法

両側に水平線がある見出しを作成する方法

このシナリオには、水平線が垂直方向の中央に配置された中央揃えの見出しを作成するタスクが含まれます背景画像が存在するため、透明な背景は維持されますが、両側に表示されます。タイトルを中央に配置し、疑似クラスを使用して線を作成しようとしましたが、タイトルのテキストを横切るときに線を消すという課題が残りました。

考えられる解決策の 1 つは、透明度のある背景のグラデーションを利用することです。言葉が宿る。ただし、このアプローチは、さまざまなタイトルの長さを扱う場合には非実用的となり、グラデーション ストップの配置が不可能になります。

最初に提供されるコードは次のとおりです。

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

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}  </code>

答えとして、コードの修正版は次のとおりです。

<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;
}
.color {
    background-color: #ccc;
}</code>

この修正されたコードは問題を解決し、タイトルのテキストを横切るたびに水平線が消えるようにします。

以上がテキストを横切るときに水平線が消える中央揃えの見出しを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。