CSS ::first-line के साथ आकर्षक पहली लाइन बनाना

परिचय

CSS ::first-line स्यूडो-एलिमेंट हमें किसी एलिमेंट की **पहली लाइन** को स्टाइल करने में मदद करता है। यह ड्रॉप कैप्स, लीड-इन टेक्स्ट, और टाइपोग्राफिक जोर के लिए उपयोगी है।

उदाहरण 1: स्टाइल्ड फर्स्ट लाइन

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
      background-color: darkorchid;
    }
    ::first-line {
      font-size: 2em;
      color: black;
      font-weight: bold;
      text-shadow: 0 -10px grey;
    }
  </style>
</head>
<body>
  <article>
    <p>Donec rutrum a erat vitae interdum. </p>
    <p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
  </article>
</body>
</html>

उदाहरण 2: बॉक्स शैडो के साथ फर्स्ट लाइन

<!DOCTYPE html>
<html>
<head>
  <style>
    article {
      text-align: center;
    }
    ::first-line {
      box-shadow: inset 0 0 13px orchid;
    }
  </style>
</head>
<body>
  <article>
    <h2>Donec rutrum a erat vitae interdum. </h2>
    <p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
    <p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
  </article>
</body>
</html>

अनुमत CSS प्रॉपर्टीज

::first-line केवल फॉन्ट, रंग, बैकग्राउंड, वर्ड-स्पेसिंग, लेटर-स्पेसिंग, टेक्स्ट-डेकोरेशन, वर्टिकल-अलाइन, टेक्स्ट-ट्रांसफॉर्म, लाइन-हाइट, और क्लियर प्रॉपर्टीज स्वीकार करता है। लेआउट प्रॉपर्टीज (मार्जिन, पैडिंग, चौड़ाई) **काम नहीं करतीं**।

व्यावहारिक उपयोग: आर्टिकल लीड-इन स्टाइल

<!DOCTYPE html>
<html lang="hi">
<head>
  <style>
    .article-lead {
      line-height: 1.8;
      font-size: 1.125rem;
      color: #444;
    }
    .article-lead::first-line {
      font-weight: 600;
      color: #1a1a1a;
      font-size: 1.2em;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .article-lead::first-letter {
      font-size: 3em;
      float: left;
      line-height: 1;
      margin-right: 0.1em;
      color: #0066cc;
    }
  </style>
</head>
<body>
  <article>
    <p class="article-lead">यह लेख CSS ::first-line स्यूडो-एलिमेंट का उपयोग करके सुंदर टाइपोग्राफिक प्रभाव बनाने का तरीका दिखाता है। पहली लाइन स्वचालित रूप से बोल्ड, अपरकेस, और थोड़ी बड़ी हो जाती है, जबकि पहला अक्षर एक ड्रॉप कैप बन जाता है।</p>
    <p>बाकी पैराग्राफ सामान्य स्टाइलिंग के साथ जारी रहता है...</p>
  </article>
</body>
</html>

महत्वपूर्ण नोट्स

• ::first-line ब्लॉक-लेवल एलिमेंट्स पर काम करता है
• "पहली लाइन" व्यूपोर्ट चौड़ाई और फॉन्ट आकार के आधार पर निर्धारित होती है
• ::first-letter के साथ संयोजित किया जा सकता है ड्रॉप कैप प्रभाव के लिए
• <br> पहली लाइन को समाप्त करता है