深圳全飞鸿

标题: ::before, ::after 用法 [打印本页]
作者: zhgc    时间: 2023-1-26 17:02
标题: ::before, ::after 用法

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0
  12.     }
  13.    
  14.     ul,
  15.     li {
  16.       list-style: none;
  17.     }

  19.     ul {
  20.       height: 40px;
  21.     }

  23.     li {
  24.       float: left;
  25.       position: relative;
  26.       margin: 0 10px;
  27.       color: #e94a3e;
  28.       font-size: 12px;
  29.       line-height: 40px;
  30.     }

  32.     .font {
  33.       padding: 0 4px 0;
  34.     }
  35.      /* before 和 after 都可以 */
  36.     .font:before {
  37.       content: "";
  38.       display: block;
  39.       position: absolute;
  40.       top: 9px;
  41.       width: 20px;
  42.       height: 20px;
  43.       -webkit-border-radius: 50%;
  44.       -moz-border-radius: 50%;
  45.       border-radius: 50%;
  46.       border: 1px solid #e94a3e;
  47.     }
  48.   </style>
  49. </head>

  51. <body>
  52. <ul>
  53.     <li>
  54.       <span class="font">正</span>
  55.       <span>100% 正品</span>
  56.     </li>
  57.     <li>
  58.       <span class="font">退</span>
  59.       <span>7天无忧</span>
  60.     </li>
  61.     <li>
  62.       <span class="font">邮</span>
  63.       <span>全场包邮(偏远地方除外)</span>
  64.     </li>
  65.   </ul>


  68. </body>

  70. </html>
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2