如何建立居中標題，其水平線在交叉文字時消失？

如何創建兩側都有水平線的標題

此場景涉及創建水平線垂直居中的居中標題的任務在每一側，同時由於背景圖像的存在而保持透明背景。儘管嘗試將標題居中並使用偽類創建一條線，但挑戰仍然在於使線在穿過標題文字時消失。

一個潛在的解決方案是利用具有透明度的背景漸變，其中這些詞存在。然而，當處理不同的標題長度時，這種方法變得不切實際，使得漸變停止點的放置變得不可能。

最初提供的程式碼如下：

<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中文網其他相關文章！