كيفية إنشاء عنوان بخطوط أفقية على كلا الجانبين

يتضمن هذا السيناريو مهمة إنشاء عنوان متمركز مع خطوط أفقية متمركزة رأسياً من كل جانب، مع الحفاظ على خلفية شفافة بسبب وجود صورة الخلفية. على الرغم من المحاولات لتوسيط العنوان وإنشاء سطر باستخدام فئة زائفة، يظل التحدي يكمن في جعل السطر يختفي عندما يتقاطع مع نص العنوان.

أحد الحلول المحتملة هو استخدام تدرج الخلفية مع الشفافية حيث الكلمات تتواجد. ومع ذلك، يصبح هذا الأسلوب غير عملي عند التعامل مع أطوال العناوين المختلفة، مما يجعل وضع علامات التوقف المتدرجة مستحيلًا.

الرمز المقدم في البداية هو كما يلي:

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

بالرجوع إلى الرابط الموجود في الإجابة، النسخة المعدلة من الكود هي كما يلي:

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

يعمل هذا الكود المعدل على حل المشكلة ويضمن اختفاء الخطوط الأفقية عند تقاطعها مع نص العنوان.