Teknologian jakaminen

::ennen ja ::jälkeen pseudoelementit CSS:ssä

2024-07-12

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

Sisällysluettelo

1. CSS-pseudoelementit

2. ::ennen ::esittelyn jälkeen

1、::ennen

2、::jälkeen

3. Sisällön yleiset attribuuttiarvot

3. ::ennen ::sovelluksen jälkeen skenaariot

1. Aseta yhtenäiset merkit

2. Lisää kuvia taustan kautta

3. Lisää koristeviivoja

4. Laajenna oikealla oleva nuoli

5. Dialogikolmio

6. Lisää kuvakekuvake

1. CSS-pseudoelementit

CSS:n pseudoelementit viittaavat virtuaalisiin elementteihin, jotka on luotu käyttämällä CSS:n erityisiä valitsimia, eivätkä ne ole olemassa olevia HTML-elementtejä;

  • Käytetään asiakirjan tiettyjen osien valitsemiseen ja käyttämiseen erikoistehosteiden aikaansaamiseksi;
  • Pseudoelementtien avulla voit muokata asiakirjan sisältöä lisäämättä ylimääräisiä HTML-tageja;
  • Pseudoelementit ovat myös elementtejä, jotka voivat asettaa erilaisia ​​HTML:n tukemia attribuutteja, mukaan lukien elementin asettelun, sijainnin, leveyden, korkeuden, taustan jne.;

Tämä artikkeli esittelee pääasiassa näiden kahden pseudoelementin sisällön ja joitain käyttöskenaarioita::before ja ::after;

2. ::ennen ::esittelyn jälkeen

::before ::after pseudo-elementtiä käytetään lisäämään määrätty sisältö ennen tai jälkeen elementin;

  • Käytä content-attribuuttia määrittääksesi lisättävän sisällön.
  • On käytettävä yhdessä content-attribuutin kanssa, content-attribuutin arvo voi olla tyhjä;
  • Pseudoelementin näyttöattribuutin arvo on oletusarvoisesti rivissä；

1、::ennen

::befor-valitsinta käytetään sisällön lisäämiseen ennen määritettyä elementtiä;

(1) Kielioppi

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

(2) Esimerkki

Lisää sisältö kaikkien p-elementtien eteen sivulla;

  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、::jälkeen

::after-valitsinta käytetään sisällön lisäämiseen määritetyn elementin jälkeen;

(1) Kielioppi

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

(2) Esimerkki

Lisää sisältö sivun kaikkien p elementtien jälkeen;

  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. Sisällön yleiset attribuuttiarvot

::before ::after on käytettävä sisällön attribuutin kanssa. Seuraavat ovat sisällön yleiset attribuuttiarvot:

sarjanumeroattribuutin arvohavainnollistaa
1merkkijonoAseta tekstisisältö;
2url("url")Aseta URL-linkit mediatiedostoille, kuten kuville;
3avoin lainausAseta johtavaksi lainaukseksi;
4läheinen lainausAseta takaisinlainaus;
5attr(attribuutti)Palauta elementin attribuutti merkkijonona;
6laskuriAseta laskuri;
7ei mitäänAseta sisältö tyhjäksi;
8normaali:before ja :after pseudoluokan elementeissä sitä pidetään none-arvona, eli se on myös nolla-arvo;

(1) Aseta tekstisisältö

Aseta content-attribuutin arvo merkkijonotyypiksi lisätäksesi tekstiä pseudoelementtiin;

  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) Aseta medialinkit

Attribuutin url() arvon kautta mediatiedoston sisältö pseudoelementtinä voidaan tuoda;

  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>

Huomaa, että URL-osoitteella lisätyn kuvan kokoa ei voi asettaa. On parasta lisätä kuva taustan kautta.

(3) Laita lainausmerkit ennen ||

Avaa lainaus tai sulje lainaus -määritteen arvon avulla voit asettaa pseudoelementin sisällön etulainaus- tai takalainausmerkkeihin.

  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) Hanki elementtiattribuutit

Hanki elementin attribuuttiarvo komennolla attr() (palautetaan merkkijonon muodossa) ja aseta se pseudoelementin sisällöksi;

  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) Aseta laskuri

  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. ::ennen ::sovelluksen jälkeen skenaariot

Vaikka näiden kahden pseudoelementin käyttö::before ::after on hyvin yksinkertaista, voidaan saavuttaa erittäin hyviä CSS-efektejä, jos niitä voidaan soveltaa joustavasti;

1. Aseta yhtenäiset merkit

  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. Lisää kuvia taustan kautta

  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. Lisää koristeviivoja

  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. Laajenna oikealla oleva nuoli

  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. Dialogikolmio

  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. Lisää kuvakekuvake

  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>

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

Edisty vähän joka päivä~!

Käytännöllinen CSS-vinkki~!

Henkilökohtainen profiili

Hän on omistautunut teknologian tutkimukselle yli 30 vuoden ajan ja hallitsee useita kieliä, kuten java, linux, javascript, php, css jne. Hän on tehnyt paljon työtä avoimen lähdekoodin alalla Kehittäjän dokumentaatioasema, jossa voit jakaa joitakin teknologian kehittämisen ongelmia myöhempää käyttöä varten

yhteystietoni

Mail