Bagaimana untuk Mencipta Tajuk Berpusat yang Elegan dengan Bar Mendatar Tanpa Tindih Teks?

Tajuk Elegan dengan Bar Mendatar

Apabila mencipta tajuk berpusat dengan bar mendatar di kedua-dua sisi, agak sukar untuk mengelakkan bar bersilang teks tersebut. Berikut ialah penyelesaian untuk mencapai kesan ini menggunakan CSS tulen:

Gambaran Keseluruhan Penyelesaian

Kaedah ini menggunakan elemen pseudo untuk mencipta bar mendatar dan meletakkannya pada kedudukan relatif tertentu kepada teks. Selain itu, margin negatif pada salah satu bar bersama-sama dengan limpahan digunakan untuk menyembunyikan bar di mana teks wujud.

Pelaksanaan

Untuk melaksanakan penyelesaian ini, ikuti langkah berikut:

1. Tentukan peraturan CSS berikut untuk tajuk:

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

Peraturan ini meletakkan tajuk, menentukan saiz fon dan mendayakan penyembunyian limpahan.

2. Buat elemen pseudo untuk bar:

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

Unsur pseudo ini diletakkan di tengah-tengah tajuk dengan lebar dan ketinggian tertentu, dan ia akan berfungsi sebagai bar mendatar.

3. Mengimbangi dan menjajarkan bar kiri:

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

Peraturan ini menggunakan margin negatif pada bar kiri untuk menjajarkannya dan memastikan bahawa ia tersembunyi di tempat teks dipaparkan.

Dengan melaksanakan peraturan CSS ini, anda boleh membuat tajuk berpusat dengan mudah dengan bar mendatar yang hilang apabila ia menyeberang teks, tanpa memasukkan sebarang elemen HTML tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tajuk Berpusat yang Elegan dengan Bar Mendatar Tanpa Tindih Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!