设为首页收藏本站
开启辅助访问 切换到窄版

深圳全飞鸿

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
深圳全飞鸿»论坛 › MES开源 › 技术开源 › HTML5 › ::before, ::after 用法
返回列表 发新帖
查看: 330|回复: 0
打印 上一主题 下一主题

::before, ::after 用法

[复制链接]
zhgc

800

主题

1379

帖子

7725

积分

版主

Rank: 7Rank: 7Rank: 7

积分
7725
跳转到指定楼层
楼主
发表于 2023-1-26 17:02:06 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

  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>
复制代码


回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|nagomes  

GMT+8, 2025-6-29 04:34 , Processed in 0.077481 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表