Condivisione della tecnologia

::prima e ::dopo gli pseudo-elementi nei CSS

2024-07-12

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

Sommario

1. Pseudoelementi CSS

2. ::prima ::dopo l'introduzione

1、::prima

2、::dopo

3. Valori degli attributi comuni del contenuto

3. ::prima ::dopo scenari applicativi

1. Imposta caratteri unificati

2. Aggiungi immagini tramite lo sfondo

3. Aggiungi linee decorative

4. Espandi la freccia a destra

5. Triangolo di dialogo

6. Inserisci l'icona icona

1. Pseudoelementi CSS

Gli pseudo elementi CSS si riferiscono a elementi virtuali creati utilizzando alcuni selettori speciali nei CSS e non sono elementi HTML effettivamente esistenti;

  • Utilizzato per selezionare e utilizzare parti specifiche del documento per ottenere alcuni effetti speciali;
  • Gli pseudo-elementi ti consentono di definire lo stile del contenuto del documento senza aggiungere ulteriori tag HTML;
  • Gli pseudo elementi sono anche elementi che possono impostare vari attributi supportati in HTML, inclusi il layout, il posizionamento, la larghezza, l'altezza, lo sfondo dell'elemento, ecc.;

Questo articolo introduce principalmente il contenuto correlato e alcuni scenari di utilizzo dei due pseudo-elementi::before e ::after;

2. ::prima ::dopo l'introduzione

::before ::after lo pseudo-elemento viene utilizzato per inserire il contenuto specificato prima o dopo l'elemento;

  • Utilizza l'attributo content per specificare il contenuto da inserire;
  • Deve essere utilizzato insieme all'attributo content, il valore dell'attributo del contenuto può essere vuoto;
  • Per impostazione predefinita, il valore dell'attributo di visualizzazione dello pseudo-elemento è inline；

1、::prima

Il selettore ::before viene utilizzato per inserire il contenuto prima dell'elemento specificato;

(1) Grammatica

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

(2) Esempio

Inserisci il contenuto davanti a tutti gli elementi p della pagina;

  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、::dopo

Il selettore ::after viene utilizzato per inserire contenuto dopo l'elemento specificato;

(1) Grammatica

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

(2) Esempio

Inserisci il contenuto dopo tutti gli elementi p della pagina;

  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. Valori degli attributi comuni del contenuto

::before ::after deve essere utilizzato insieme all'attributo content. Di seguito sono riportati i valori degli attributi comuni​​del contenuto:

numero di serievalore dell'attributoillustrare
1cordaImposta il contenuto del testo;
2url("indirizzo")Imposta collegamenti URL per file multimediali come immagini;
3citazione apertaImposta come citazione iniziale;
4chiudi-citazioneImpostato su virgolette inverse;
5attributo(attributo)Restituisce l'attributo attributo dell'elemento come una stringa;
6contatoreImposta contatore;
7nessunoImposta il contenuto su un valore nullo;
8normaleNegli elementi pseudo-classe :before e :after verrà considerato none, ovvero sarà anch'esso un valore nullo;

(1) Imposta il contenuto del testo

Imposta il valore dell'attributo content sul tipo stringa per aggiungere testo allo pseudo elemento;

  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) Imposta i collegamenti multimediali

Attraverso il valore dell'attributo url() è possibile importare il contenuto del file multimediale come pseudo elemento;

  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>

Tieni presente che la dimensione dell'immagine aggiunta utilizzando l'URL non può essere impostata. È meglio aggiungere l'immagine tramite lo sfondo;

(3) Mettere le virgolette prima di ||

Attraverso il valore dell'attributo open-quote o close-quote, è possibile impostare il contenuto dello pseudo elemento su virgolette iniziali o virgolette posteriori;

  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) Ottieni gli attributi dell'elemento

Ottenere un valore di attributo dell'elemento tramite attr() (restituito sotto forma di stringa) e impostarlo come contenuto dello pseudo elemento;

  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) Imposta il contatore

  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. ::prima ::dopo scenari applicativi

Sebbene l'uso di questi due pseudo-elementi::before ::after sia molto semplice, se possono essere applicati in modo flessibile, si possono ottenere ottimi effetti CSS;

1. Imposta caratteri unificati

  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. Aggiungi immagini tramite lo sfondo

  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. Aggiungi linee decorative

  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. Espandi la freccia a destra

  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. Triangolo di dialogo

  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. Inserisci l'icona icona

  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>

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

Fai piccoli progressi ogni giorno~!

Un consiglio pratico sui CSS~!

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta