Berikut ialah beberapa tajuk artikel berasaskan soalan yang sesuai dengan teks yang anda sediakan: * Bagaimana untuk Mencipta Tajuk Berpusat dengan Garisan Mendatar pada Kedua-dua Sisi (Tiada Latar Belakang)? * Ingin Menambah Garisan Mendatar kepada Anda

Cara Membuat Tajuk dengan Garisan Mendatar di Kedua-dua Sisi Tanpa Latar Belakang

Dalam senario ini, anda perlu mencipta tajuk halaman berpusat dengan garisan mendatar pada kedua-dua belah tanpa sebarang warna latar belakang.

Penyelesaian 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;
}

/*Optional for background color*/
.color {
    background-color: #ccc;
}

Penjelasan:

• h1 diposisikan secara relatif dan berpusat menggunakan text-align: center.
• Sebelum dan selepas elemen dicipta menggunakan :sebelum dan :selepas dan diposisikan secara mutlak pada 51% atas untuk memusatkannya secara menegak.
• Sifat kandungan dengan 'a0' (ruang tidak putus) menjadikan garisan hilang di tempat teks berada.
• limpahan: tersembunyi memastikan garisan tidak bertindih dengan teks.
• Secara pilihan, anda boleh menggunakan kelas .color untuk menambah warna latar belakang jika mahu.

Nota: Penyelesaian ini boleh mengendalikan tajuk dengan panjang yang berbeza-beza tanpa melaraskan peletakan baris secara manual.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk artikel berasaskan soalan yang sesuai dengan teks yang anda sediakan: * Bagaimana untuk Mencipta Tajuk Berpusat dengan Garisan Mendatar pada Kedua-dua Sisi (Tiada Latar Belakang)? * Ingin Menambah Garisan Mendatar kepada Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!