免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: CSS实例教程;使用:before和:after插入内容 [打印本页]

---

作者: admin    时间: 2023-3-14 18:26
标题: CSS实例教程;使用:before和:after插入内容

在css中，我们可以使用:before伪元素选择器与:after伪元素选择器在页面的前面和后面以content属性的方式插入内容。

从css2.0添加这两个伪元素选择器到css2.1到现在的3.0，都不断的在对这两个选择器进行改良和扩展。

首先，我们来看一下，在css2中，我们如何来插入内容（ie6 7不在考虑范围之内，因为他们不支持:before与after）。

在css2中，我们使用:before来在元素的前面插入内容，使用:after在元素的后面插入内容（兼容浏览器：firefox、chrome、safari、opera、ie8+）。请看下面的例子：

css样式：

1.             #div1 {
   
2.                 border: 1px solid #090;
   
3.                 padding: 10px;
   
4.                 font-size: 14px;
   
5.                 margin-bottom: 10px;
   
6.             }
   
7. 
   
8.             #div1:before{
   
9.                     content:"【";
   
10.                                 color:#f00;
    
11.                                 font-family:Arial;
    
12.             }
    
13. 
    
14.             #div1:after{
    
15.                     content:"】";
    
16.                                 color:#f00;
    
17.                                 font-family:Arial;
    
18.             }

复制代码

1. <div id="div1">插入内容</div>

复制代码

---

欢迎光临 免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://ourphp.net/club/)

Powered by Discuz! X3.2