Κοινή χρήση τεχνολογίας

::πριν και ::μετά ψευδοστοιχεία στο CSS

2024-07-12

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

Πίνακας περιεχομένων

1. ψευδοστοιχεία CSS

2. ::πριν από ::μετά την εισαγωγή

1,::πριν

2,::μετά

3. Κοινές τιμές χαρακτηριστικών του περιεχομένου

3. ::πριν από ::μετά σενάρια εφαρμογής

1. Ορίστε ενοποιημένους χαρακτήρες

2. Προσθέστε εικόνες μέσω του φόντου

3. Προσθέστε διακοσμητικές γραμμές

4. Αναπτύξτε το βέλος στα δεξιά

5. Διαλογικό τρίγωνο

6. Εισαγάγετε το εικονίδιο του εικονιδίου

1. ψευδοστοιχεία CSS

Τα ψευδοστοιχεία CSS αναφέρονται σε εικονικά στοιχεία που δημιουργούνται με τη χρήση ορισμένων ειδικών επιλογέων στο CSS και δεν είναι πραγματικά υπάρχοντα στοιχεία HTML.

  • Χρησιμοποιείται για την επιλογή και τη λειτουργία συγκεκριμένων τμημάτων του εγγράφου για την επίτευξη ορισμένων ειδικών εφέ.
  • Τα ψευδοστοιχεία σάς επιτρέπουν να διαμορφώνετε το στυλ του περιεχομένου στο έγγραφο χωρίς να προσθέτετε πρόσθετες ετικέτες HTML.
  • Τα ψευδοστοιχεία είναι επίσης στοιχεία που μπορούν να ορίσουν διάφορα χαρακτηριστικά που υποστηρίζονται σε HTML, συμπεριλαμβανομένης της διάταξης, της θέσης, του πλάτους, του ύψους, του φόντου κ.λπ.

Αυτό το άρθρο εισάγει κυρίως το σχετικό περιεχόμενο και ορισμένα σενάρια χρήσης των δύο ψευδοστοιχείων::before και ::after;

2. ::πριν από ::μετά την εισαγωγή

Το ψευδοστοιχείο ::before ::after χρησιμοποιείται για την εισαγωγή συγκεκριμένου περιεχομένου πριν ή μετά το στοιχείο.

  • Χρησιμοποιήστε το χαρακτηριστικό περιεχομένου για να καθορίσετε το περιεχόμενο που θα εισαχθεί.
  • Πρέπει να χρησιμοποιείται μαζί με το χαρακτηριστικό content, η τιμή του χαρακτηριστικού περιεχομένου μπορεί να είναι κενή.
  • Η τιμή του χαρακτηριστικού εμφάνισης του ψευδοστοιχείου είναι από προεπιλογή inline；

1,::πριν

Ο επιλογέας ::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>

2,::μετά

Ο επιλογέας ::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 πρέπει να χρησιμοποιείται μαζί με το χαρακτηριστικό content Οι ακόλουθες είναι οι κοινές τιμές χαρακτηριστικών του περιεχομένου:

σειριακός αριθμόςτιμή χαρακτηριστικούεικονογραφώ
1σειράΟρισμός περιεχομένου κειμένου.
2url ("url")Ορίστε συνδέσμους URL για αρχεία πολυμέσων, όπως εικόνες.
3ανοιχτό εισαγωγικόΟρίστε ως κορυφαίο απόσπασμα.
4κοντινό απόσπασμαΟρισμός σε backquote.
5attr(Χαρακτηριστικό)Επιστρέψτε το χαρακτηριστικό γνώρισμα του στοιχείου ως συμβολοσειρά.
6μετρητήςΡύθμιση μετρητή?
7κανέναςΟρίστε το περιεχόμενο σε μηδενική τιμή.
8κανονικόςΣτα στοιχεία :before και :after ψευδο-κλάσης, θα θεωρείται ως none, δηλαδή είναι επίσης μηδενική τιμή.

(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, μπορείτε να ορίσετε το περιεχόμενο του ψευδοστοιχείου σε μπροστινά εισαγωγικά ή πίσω εισαγωγικά.

  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~!

Προσωπικό προφίλ

Έχει αφοσιωθεί στην έρευνα της τεχνολογίας για περισσότερα από 30 χρόνια και είναι ικανός σε διάφορες γλώσσες όπως java, linux, javascript, php, css κ.λπ. Έχει κάνει πολλές συνεισφορές στον τομέα του ανοιχτού κώδικα σταθμός τεκμηρίωσης προγραμματιστή για να μοιραστείτε ορισμένα ζητήματα στην ανάπτυξη τεχνολογίας για μελλοντική αναφορά

τα στοιχεία επικοινωνίας μου

Ταχυδρομείο