Bagaimana untuk Mencipta Tajuk Berpusat dengan Garis Mendatar Yang Hilang Apabila Menyilang Teks?

Cara Membuat Tajuk dengan Garisan Mendatar di Mana-mana Sisi

Senario ini melibatkan tugas mencipta tajuk berpusat dengan garisan mendatar berpusat menegak pada setiap sisi, sambil mengekalkan latar belakang yang telus kerana kehadiran imej latar belakang. Walaupun percubaan untuk memusatkan tajuk dan mencipta baris menggunakan kelas pseudo, cabaran tetap ada untuk membuat baris hilang apabila ia melintasi teks tajuk.

Satu penyelesaian yang berpotensi ialah menggunakan kecerunan latar belakang dengan ketelusan di mana perkataan tinggal. Walau bagaimanapun, pendekatan ini menjadi tidak praktikal apabila berurusan dengan panjang tajuk yang berbeza-beza, menjadikan peletakan kecerunan berhenti menjadi mustahil.

Kod yang diberikan pada mulanya adalah seperti berikut:

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

Merujuk pautan yang disediakan dalam jawapan, versi kod yang diubah suai adalah seperti berikut:

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

Kod yang diubah suai ini menyelesaikan isu dan memastikan garis mendatar hilang apabila ia melintasi teks tajuk.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tajuk Berpusat dengan Garis Mendatar Yang Hilang Apabila Menyilang Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!