Technology sharing

:: ante et :: post pseudo-elementa in CSS

2024-07-12

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

Tabula contentorum

1. CSS pseudo-elementa

2. :: ante :: post introductionem

1、:: ante

2、:: post

3. Commune attributum valores contentorum

3. :: ante :: post applicationem missiones

1. constitue unum characteribus

2. addere imagines in background

3. addere lineae decorat

4. Sagitta Expand a dextra

5. Dialogi trianguli

6. Insert icon icon

1. CSS pseudo-elementa

CSS elementa pseudo elementa respiciunt virtualia elementa adhibitis quibusdam specialibus selectoribus in CSS et elementis HTML non existentibus;

  • Solebant seligere et operari partes speciales documenti ad aliquos effectus speciales consequendos;
  • Pseudo-elementa in documento contenta stylo te permittunt sine additis HTML tags;
  • Pseudo elementa etiam elementa sunt quae variis attributis HTML fulta, incluso elementi extensione, positione, latitudine, altitudine, background, etc.

Articulus hic maxime infert contentum coniunctum et quosdam usus missionum duorum pseudo-elementorum :: ante et :: post;

2. :: ante :: post introductionem

:: ante :: post pseudo-elementum adhibetur inserere certa contentus ante vel post elementum;

  • Utere contentum attributum ad inserendum contentum;
  • Debet esse una cum content attributicontentum, valorem attributum vacuum esse potest;
  • Ad ostentationem valorem attributum pseudo-elementum defaltis ad inline；

1、:: ante

:: antequam electrix inserere contentus ante determinatum elementum adhibetur;

(1) Grammatica

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

(2) Exemplum

Ante omnia p elementa in pagina inserere contentus;

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

The :: post electrix inserere contentus post determinatum elementum adhibetur;

(1) Grammatica

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

(2) Exemplum

Inserta contenta post omnia p elementa in 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. Commune attributum valores contentorum

:: ante :: post utendum est una cum attributo contento.

serial numerusattributum valoremillustrare
1filumPone textum contentum;
2url("url")URL nexus pone pro fasciculis instrumentis ut imagines;
3aperta-quotePone ut primores referas;
4prope-quoteReponere to backquote;
5attr(attributum)Redde attributum elementi ut filo;
6contraPone Peripatetici;
7nullusNulli valorem contentum pone;
8normalis "In : ante et : post pseudo-genus elementa, pro nulla, id est, nullius valoris est;

(1) Pone textum content

Pone contentum valorem attributum ad chordas generis ad textum ad pseudo- elementi adde;

  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) Nexus instrumentorum constitue

Per url() valorem attributum, contentum instrumentorum instrumentorum ut pseudo elementum importari potest;

  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>

Nota magnitudinem imaginis additae utens domicilio non posse. Optimum est imaginem per curriculum addere;

(3) Pone scntentia notas ante ||

Per verbum apertum vel valorem attributum comminus, potes contentum pseudo-elementi ad anterius quotes vel retro afferre;

  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>

(IV) attributa Get elementum

Quantitatem elementi per attr() (in formam chordae redditam obtine) attributum, eamque ut elementi pseudo contentum pone;

  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) Set counter

  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. :: ante :: post applicationem missiones

Quanquam horum duorum elementorum pseudo-elementorum usus ::ante ::post simplex est, si mollius applicari queat, effectus quidam optimus CSS effici potest;

1. constitue unum characteribus

  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. addere imagines in background

  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. addere lineae decorat

  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. Sagitta Expand a dextra

  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. Dialogi trianguli

  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. Insert icon icon

  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>

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

Quotidie parum proficis~!

Practicus CSS tip~!

Personal profile

technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones technologiarum progressus ad futuram referentiam

mihi contactus notitia

Mail