ホームページ > ウェブフロントエンド > CSSチュートリアル > テキストを横切るときに水平線が消える中央揃えの見出しを作成する方法

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

Patricia Arquette
リリース: 2024-10-30 21:19:30
オリジナル
529 人が閲覧しました

How to Create a Centered Heading with Horizontal Lines That Disappear When Crossing Text?

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

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

考えられる解決策の 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート