कैसे बनाया जाता है: टेक्स्ट विभाजक

संज्ञानी टेक्स्ट विभाजक कैसे बनाया जाता है

पहला कदम - HTML जोड़ें:

<div class="divider">Lorem Ipsum</div>

दूसरा कदम - CSS जोड़ें:

.divider {
  फ़ॉन्ट आकार: 30 पिक्सल;
  प्रदर्शन: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  पैडिंग: 3px;
  पृष्ठभूमि रंग: लाल;
  मार्ग: 5px;
}

स्वयं एक प्रयोग करें

उदाहरण व्याख्या:

इस उदाहरण में आपको CSS के द्वारा एक पाठ विभाजक कैसे बनाना है। विशेष रूप से, यह एचटीएमएल और सीएसएस के संयोजन का उपयोग करके इस प्रभाव को देखाता है。

पहले, आपको HTML में "divider" को वर्गीकरण वाला <div> एलीमेंट जोड़ना होगा और उसमें आप दिखाना चाहते हैं कि पाठ (इस उदाहरण में, पाठ "Lorem Ipsum" है)।

तब, CSS में, आपने .divider क्लास को कुछ शैली सेट किया है। आपने फ़ॉन्ट आकार 30 पिक्सल, flex बुनियादी ढांचा और align-items: center; पाठ को विभाजक में खड़े रूप में मध्यस्थ स्थिति में रखने के लिए

फिर, आपने प्रत्यायां का उपयोग किया ::before और ::after विभाजक के दोनों ओर के अलंकरण जोड़ने के लिए flex: 1 से उनका आकार निर्धारित करें .divider एलीमेंट में पाठ के अलावा सभी स्थान। आपने इसे भी सेट किया है content: '' इन दो प्रत्यायां खाली होने दें, वे किसी भी सामग्री को नहीं शामिल करें।

तब, अंतरांतरां, पृष्ठभूमि रंग और बाह्य अंतरांतर को निर्धारित करके विभाजक शैली को परिभाषित करें। इस उदाहरण में, विभाजक का रंग लाल है और कुछ अंतरांतर हैं।