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

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

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

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

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%;  
}  

回答に記載されているリンクを参照すると、コードの修正版は次のとおりです。

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;
}

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