यह CSS Pseudo Element किसी एलिमेंट के कंटेंट के पहले अक्षर को सिलेक्ट करता है। हालांकि, यह काम नहीं करता यदि एलिमेंट इनलाइन-लेवल है।
उदाहरण
आइए CSS ::first-letter pseudo element के लिए एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> div{ background-color: #32485d; border: 5px solid black; color: #959799; } p::first-letter { font-size: 1.5em; color: #f9f9f9; padding: 2px; } </style> </head> <body> <div> <h2>Eclipse IDE</h2> <p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p> </div> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
उदाहरण
आइए CSS ::first-letter pseudo element का एक और उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> p::first-letter { font-size: 1.5em; background-color: black; color: #dc3545; padding: 2px; } </style> </head> <body> <div> <h2>Machine Learning Tutorials</h2> <p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p> </div> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
