如何創建帶有水平條且沒有文字重疊的優雅居中標題？-css教學-PHP中文網

如何創建帶有水平條且沒有文字重疊的優雅居中標題？

Barbara Streisand

發布： 2024-10-27 05:32:29

原創

754 人瀏覽過

How to Create Elegant Centered Headings with Horizontal Bars Without Text Overlap?

帶有水平條的優雅標題

創建兩側帶有水平條的居中標題時，避免水平條交叉可能很棘手文字.以下是使用純CSS 實現此效果的解決方案：

解決方案概述

此方法利用偽元素創建水平條並將其放置在相對於特定位置到正文。此外，其中一個欄上的負邊距和溢位用於隱藏文字所在的欄位。

實現

要實現此解決方案，請執行以下操作這些步驟：

為標題定義以下CSS 規則：

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

登入後複製

為標題定義以下CSS 規則：

定義以下CSS 規則：

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

登入後複製

為欄位建立偽元素：

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

登入後複製

這些偽元素以一定的寬度和高度放置在標題的中心，它們將用作水平條。

偏移並對齊左欄：此規則對左欄應用負邊距以對齊它並確保它隱藏在文字出現的位置。透過實作這些 CSS 規則，您可以輕鬆建立居中的標題，其中水平條在跨越文字時會消失，而無需包含任何其他 HTML 元素。

以上是如何創建帶有水平條且沒有文字重疊的優雅居中標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！