प्रौद्योगिकी साझेदारी

::before तथा ::after CSS मध्ये छद्म-तत्त्वानि

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

सामग्रीसूची

1. CSS छद्म-तत्त्वानि

2. ::पूर्वम् ::परिचयानन्तरं

१、::पूर्वम्

२、::पश्चात्

3. सामग्रीयाः सामान्यविशेषणमूल्यानि

3. ::पूर्वं ::अनुप्रयोगपरिदृश्यानां पश्चात्

1. एकीकृतवर्णान् सेट् कुर्वन्तु

2. पृष्ठभूमिद्वारा चित्राणि योजयन्तु

3. अलङ्कारिकरेखाः योजयन्तु

4. दक्षिणतः बाणं विस्तारयन्तु

5. संवादत्रिकोणम्

6. चिह्नचिह्नं सम्मिलितं कुर्वन्तु

1. CSS छद्म-तत्त्वानि

CSS छद्मतत्त्वानि CSS मध्ये केषाञ्चन विशेषचयनकानाम् उपयोगेन निर्मितानाम् आभासीतत्त्वानां संदर्भं ददति तथा च वास्तविकविद्यमान HTML तत्त्वानि न सन्ति;

  • केचन विशेषप्रभावाः प्राप्तुं दस्तावेजस्य विशिष्टभागानाम् चयनं संचालनं च कर्तुं प्रयुक्तम्;
  • छद्म-तत्त्वानि अतिरिक्त HTML टैग् न योजयित्वा दस्तावेजे सामग्रीं शैलीं कर्तुं शक्नुवन्ति;
  • छद्मतत्त्वानि अपि ते तत्त्वानि सन्ति ये HTML मध्ये समर्थितानि विविधानि विशेषतानि सेट् कर्तुं शक्नुवन्ति, यथा तत्त्वस्य विन्यासः, स्थितिः, विस्तारः, ऊर्ध्वता, पृष्ठभूमिः इत्यादयः;

अस्मिन् लेखे मुख्यतया द्वयोः छद्मतत्त्वयोः::before तथा ::after इत्येतयोः सम्बन्धितसामग्रीणां केषाञ्चन उपयोगपरिदृश्यानां च परिचयः कृतः अस्ति;

2. ::पूर्वम् ::परिचयानन्तरं

::before ::after pseudo-element इत्यस्य उपयोगः तत्त्वस्य पूर्वं वा पश्चात् वा निर्दिष्टा सामग्रीं सम्मिलितुं भवति;

  • सम्मिलितुं सामग्रीं निर्दिष्टुं सामग्रीविशेषणस्य उपयोगं कुर्वन्तु;
  • सामग्रीविशेषणेन सह एकत्र उपयोगः करणीयः, सामग्रीविशेषणमूल्यं रिक्तं भवितुम् अर्हति;
  • pseudo-element इत्यस्य display attribute मूल्यं पूर्वनिर्धारितं inline इत्यत्र भवति；

१、::पूर्वम्

निर्दिष्टतत्त्वात् पूर्वं सामग्रीं सम्मिलितुं ::before चयनकर्ता उपयुज्यते;

(1) व्याकरणम्

  1. 元素::before{
  2.     content: "要插入的内容";
  3.     /* 其他属性 */
  4. }

(2) उदाहरणम्

पृष्ठे सर्वेषां p तत्त्वानां पुरतः सामग्रीं सम्मिलितं कुर्वन्तु;

  1. <style>
  2.     p::before{
  3.         content: "使用::before伪元素插入的内容——";
  4.         /* 其他属性 */
  5.     }
  6. </style>
  7. <body>
  8.     <div>
  9.         <p>第一个P标签中的内容</p>
  10.         <p>第二个P标签中的内容</p>
  11.         <p>第三个P标签中的内容</p>
  12.     </div>
  13. </body>

२、::पश्चात्

निर्दिष्टस्य तत्त्वस्य अनन्तरं सामग्रीं सम्मिलितुं ::after चयनकस्य उपयोगः भवति;

(1) व्याकरणम्

  1. 元素::after{
  2.     content: "要插入的内容";
  3.     /* 其他属性 */
  4. }

(2) उदाहरणम्

पृष्ठे सर्वेषां p तत्त्वानां पश्चात् सामग्रीं सम्मिलितं कुर्वन्तु;

  1. <style>
  2.     p::after{
  3.         content: "——使用::after伪元素插入的内容";
  4.         /* 其他属性 */
  5.     }
  6. </style>
  7. <body>
  8.     <div>
  9.         <p>第一个P标签中的内容</p>
  10.         <p>第二个P标签中的内容</p>
  11.         <p>第三个P标签中的内容</p>
  12.     </div>
  13. </body>

3. सामग्रीयाः सामान्यविशेषणमूल्यानि

::before ::after इत्यस्य उपयोगः सामग्रीविशेषणेन सह अवश्यं करणीयः ।

क्रमाङ्कःविशेषता मूल्यम्दृष्टान्तरूपेण दर्शयतु
1सूत्रपाठसामग्री सेट् कुर्वन्तु;
2url("url") २.चित्राणि इत्यादीनां माध्यमसञ्चिकानां कृते URL लिङ्क् सेट् कुर्वन्तु;
3मुक्त-उद्धरणम्अग्रणी उद्धरणरूपेण सेट् कुर्वन्तु;
4निकट-उद्धरणbackquote इति सेट् कुर्वन्तु;
5अत्त्र्(गुण)एलिमेण्ट् इत्यस्य एट्रिब्यूट् एट्रिब्यूट् स्ट्रिंग् इत्यस्य रूपेण प्रत्यागच्छतु;
6गणित्रगणकं सेट् कुर्वन्तु;
7न कश्चित्सामग्रीं शून्यमूल्ये सेट् कुर्वन्तु;
8सामान्यछद्मवर्गतत्त्वेषु :पूर्वं :पश्चात् च नास्ति इति गण्यते अर्थात् शून्यमूल्यमपि भवति;

(1) पाठसामग्री सेट् कुर्वन्तु

छद्मतत्त्वे पाठं योजयितुं सामग्रीविशेषणमूल्यं स्ट्रिंग् प्रकारे सेट् कुर्वन्तु;

  1. <style>
  2.     span::before{
  3.         content: "使用::before添加的文本前缀——————";
  4.     }
  5.     span::after{
  6.         content: "————使用::after添加的文本后缀";
  7.     }
  8. </style>
  9. ......
  10. <body>
  11.     <span class="box">我是HTML元素中的文本</span>
  12. </body>

(2) मीडिया लिङ्क्स् सेट् कुर्वन्तु

url() विशेषतामूल्येन माध्यमसञ्चिकायाः ​​सामग्रीं छद्मतत्त्वरूपेण आयातुं शक्यते;

  1. <style>
  2.     .container {
  3.         margin: 100px;
  4.     }
  5.     .avatar::after{
  6.         content: url("D:\test\girl.png");
  7.         display: block;
  8.     }
  9. </style>
  10. ......
  11. <body>
  12.     <div class="container">
  13.         <div class="avatar">示例图片</div>
  14.     </div>
  15. </body>

ध्यानं कुर्वन्तु यत् URL इत्यस्य उपयोगेन योजितस्य चित्रस्य आकारः सेट् कर्तुं न शक्यते पृष्ठभूमिद्वारा चित्रं योजयितुं सर्वोत्तमम्;

(3) पूर्वं उद्धरणचिह्नानि स्थापयन्तु ||

open-quote अथवा close-quote attribute value इत्यस्य माध्यमेन, भवान् pseudo element इत्यस्य सामग्रीं front quotes अथवा back quotes इत्यत्र सेट् कर्तुं शक्नोति;

  1. <style>
  2.     p:nth-child(1)::before{
  3.         content:open-quote;
  4.         /* 其他属性 */
  5.     }
  6.     p:nth-child(2)::after{
  7.         content:close-quote;
  8.     }
  9. </style>
  10. ......
  11. <body>
  12.     <div>
  13.         <p>添加前引号</p>
  14.         <p>添加后引号</p>
  15.     </div>
  16. </body>

(4) तत्त्वगुणान् प्राप्नुत

attr() (स्ट्रिंग् रूपेण प्रत्यागतम्) इत्यस्य माध्यमेन तत्त्वस्य विशेषतामूल्यं प्राप्नुवन्तु तथा च छद्मतत्त्वस्य सामग्रीरूपेण सेट् कुर्वन्तु;

  1. <style>
  2.     a:after {
  3.         content: " (" attr(href) ")";
  4.     }
  5. </style>
  6. ......
  7. <body>
  8.     <div><a href="https://www.csdn.net">CSDN</a>点击跳转至CSDN...</div>
  9.     <div><a href="https://www.baidu.com">百度</a>点击跳转至百度...</div>
  10. </body>

(5) गणकं सेट् कुर्वन्तु

  1. <style>
  2.     div {
  3.         counter-increment: index;
  4.     }
  5.     div:before {
  6.         content:counter(index);
  7.     }
  8. </style>
  9. ......
  10. <body>
  11.     <div>、、、、、、我是第1个div、、、、、、</div>
  12.     <div>、、、、、、我是第2个div、、、、、、</div>
  13.     <div>、、、、、、我是第3个div、、、、、、</div>
  14.     <div>、、、、、、我是第4个div、、、、、、</div>
  15. </body>

3. ::पूर्वं ::अनुप्रयोगपरिदृश्यानां पश्चात्

यद्यपि एतयोः छद्मतत्त्वयोः::before ::after इत्यस्य उपयोगः अतीव सरलः अस्ति तथापि यदि तान् लचीलेन प्रयोक्तुं शक्यन्ते तर्हि केचन अत्यन्तं उत्तमाः CSS प्रभावाः प्राप्तुं शक्यन्ते;

1. एकीकृतवर्णान् सेट् कुर्वन्तु

  1. <style>
  2.     p::before{
  3.         content: "* ";
  4.         color: red;
  5.         font-size: 24px;
  6.         /* 其他属性 */
  7.     }
  8.     p::after{
  9.         content: "：____________";
  10.         /* 其他属性 */
  11.     }
  12. </style>
  13. ...
  14. <body>
  15.     <div>
  16.         <p>姓名</p>
  17.         <p>年龄</p>
  18.         <p>出生日期</p>
  19.         <p>居住地址</p>
  20.     </div>
  21. </body>

2. पृष्ठभूमिद्वारा चित्राणि योजयन्तु

  1. <style>
  2.     .container{
  3.         margin: 100px;
  4.     }
  5.     .container::after{
  6.         content: "";
  7.         display:block;
  8.         width: 260px;
  9.         height: 260px;
  10.         background-image: url("D:\test\girl.png");
  11.         background-position: center;
  12.         background-size: cover;
  13.     }
  14. </style>
  15. ......
  16. <body>
  17.     <div class="container">通过背景添加图片</div>
  18. </body>

3. अलङ्कारिकरेखाः योजयन्तु

  1. <style>
  2.     .line{
  3.         display: flex;
  4.         align-items: center;
  5.         margin: 60px;
  6.         height: 40px;
  7.         font-size: 18px;
  8.     }
  9.     .line::before, .line::after{
  10.         content: "";
  11.         width: 300px;
  12.         border-top: 6px double;
  13.         margin: 5px;
  14.     }
  15.     
  16. </style>
  17. ......
  18. <body>
  19.     <div class="line">添加装饰线</div>
  20. </body>

4. दक्षिणतः बाणं विस्तारयन्तु

  1. <style>
  2.     .container{
  3.         display: flex;
  4.         flex-direction: column;
  5.         align-items: center;
  6.         justify-content: center;
  7.  
  8.         width: 400px;
  9.         margin: 100px auto;
  10.         padding: 30px 0;
  11.         border-radius: 8px;
  12.         box-shadow: 0 0 4px 1px #acacac;
  13.     }
  14.  
  15.     .setting-item{
  16.         position: relative;
  17.         align-items: center;
  18.         display: flex;
  19.         width: 300px;
  20.         height: 40px;
  21.         margin-bottom: 20px;
  22.         border-bottom: 1px solid #ccc;
  23.     }
  24.  
  25.     .setting-item::after{
  26.         position: absolute;
  27.         right: 0;
  28.         content: "";
  29.         width: 8px;
  30.         height: 8px;
  31.         border-top: 1px solid #666;
  32.         border-right: 1px solid #666;
  33.         transform: rotate(45deg);
  34.     }
  35.     
  36. </style>
  37. ......
  38. <body>
  39.     <div class="container">
  40.         <div class="setting-item">账号设置</div>
  41.         <div class="setting-item">权限管理</div>
  42.         <div class="setting-item">相关服务</div>
  43.         <div class="setting-item">帮助与反馈</div>
  44.         <div class="setting-item">......</div>
  45.     </div>
  46. </body>

5. संवादत्रिकोणम्

  1. <style>
  2.     .container {
  3.         width: 400px;
  4.         margin: 100px auto;
  5.         padding: 30px 0;
  6.         border-radius: 8px;
  7.         box-shadow: 0 0 4px 1px yellowgreen;
  8.     }
  9.  
  10.     .left-box,.right-box {
  11.         display: flex;
  12.     }
  13.  
  14.     .right-box {
  15.         justify-content: end;
  16.     }
  17.  
  18.     span {
  19.         position: relative;
  20.         display: flex;
  21.         align-items: center;
  22.  
  23.         background-color: yellowgreen;
  24.         border-radius: 6px;
  25.         margin: 4px 14px;
  26.         padding: 16px;
  27.     }
  28.  
  29.     .left-box span::before, .right-box span::after{
  30.         position: absolute;
  31.         content: "";
  32.         width: 12px;
  33.         height: 12px;
  34.         background-color: yellowgreen;
  35.         transform: rotate(45deg);
  36.     }
  37.  
  38.     .left-box span::before{
  39.         left: -6px;
  40.     }
  41.     .right-box span::after {
  42.         right: -6px;
  43.     }
  44. </style>
  45.  
  46. ......
  47.  
  48. <body>
  49.     <div class="container">
  50.         <div class="left-box">
  51.             <span>Nice to meet you!</span>
  52.         </div>
  53.         <div class="right-box">
  54.             <span>Nice to meet you, too!</span>
  55.         </div>
  56.     </div>
  57. </body>

6. चिह्नचिह्नं सम्मिलितं कुर्वन्तु

  1. <style>
  2.     .login-box{
  3.         display: flex;
  4.         flex-direction: column;
  5.         align-items: center;
  6.         justify-content: center;
  7.  
  8.         width: 400px;
  9.         height: 400px;
  10.         margin: 100px auto;
  11.         border-radius: 8px;
  12.         box-shadow: 0 0 4px 1px #acacac;
  13.     }
  14.     .title{
  15.         font-size: 24px;
  16.         font-weight: 700;
  17.         margin-bottom: 40px;
  18.     }
  19.     .account, .pwd, .login-btn, .forgot-pwd{
  20.         width: 300px;
  21.         height: 40px;
  22.         line-height: 40px;
  23.     }
  24.  
  25.     .account, .pwd{
  26.         display: flex;
  27.         align-items: center;
  28.         border-bottom: 1px solid #ccc;
  29.         font-size: 14px;
  30.         color: #888;
  31.     }
  32.     .pwd{
  33.         margin-top: 20px;
  34.     }
  35.     .account::before, .pwd::before{
  36.         content: '';
  37.         display: inline-block;  
  38.         width: 24px;
  39.         height: 24px;
  40.         background-repeat: no-repeat;
  41.         background-position: center center;
  42.         background-size: contain;
  43.         margin-right: 8px;
  44.     }
  45.     .account::before{
  46.         background-image: url("D:\test\user.svg");
  47.     }
  48.     .pwd::before {
  49.         background-image: url("D:\test\pwd.svg");
  50.     }
  51.  
  52.     .login-btn{
  53.         text-align: center;
  54.         color: #fff;
  55.         font-size: 16px;
  56.         font-weight: 700;
  57.         background: #2687F0;
  58.         border-radius: 5px;
  59.         margin-top: 40px;
  60.     }
  61.  
  62.     .forgot-pwd{
  63.         text-align: right;
  64.         font-size: 14px;
  65.         color: #888;
  66.         margin-top: 20px;
  67.     }
  68. </style>
  69. ......
  70. <body>
  71.     <div class="login-box">
  72.         <div class="title">XXX 管理系统</div>
  73.         <div class="account">请输入账号</div>
  74.         <div class="pwd">请输入密码</div>
  75.         <div class="login-btn">登 录</div>
  76.         <div class="forgot-pwd">忘记密码</div>
  77.     </div>
  78. </body>

=========================================================================

प्रतिदिनं किञ्चित् प्रगतिम् कुर्वन्तु~!

एकं व्यावहारिकं CSS टिप्~!

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अनुसरणं प्रौयोगिक क्रमबद्धता युक्तं, आलंकार, जावा, जावास्विस्च, ph, css, सद्भावना संस्कृती, ph, css निर्वहनशील भाषा सुनावंश, ससरोत विद्वान विपक्षी विद्वान विनियोग विनियोग विनियोग विनियोग्य विवेचन विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग

मम सम्पर्कसूचना

मेल