::after,::before使用
 

1.:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

 <!DOCTYPE html>

 <html>

 <head>

     <style>

     p:before

     {

     content:"台词：";

     }

     </style>

 </head>

 <body>

     <p>我是唐老鸭。</p>

     <p>我住在 Duckburg。</p>

     <p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>

 </body>

 </html>

结果：（在每个<p>前面加上content内容）

台词：我是唐老鸭。

台词：我住在 Duckburg。

注释：对于在 IE8 中工作的 :before，必须声明 DOCTYPE。

2.:after 和前述相反，选择器在被选元素的内容后面插入内容。

随机推荐

  1. 【HTML5】Application Cache应用程序缓存

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...

  2. 最大子矩阵和 URAL 1146 Maximum Sum

    题目传送门 /* 最大子矩阵和:把二维降到一维,即把列压缩:然后看是否满足最大连续子序列: 好像之前做过,没印象了,看来做过的题目要经常看看:) */ #include <cstdio> ...

  3. Redis作为多个Windows服务运行配置方法

    1.首先下载微软官方推荐的版本redis-2.8.12 2.开始配置,首先复制两份redis.conf并且重命名为redis6379.conf  redis6380.conf 里面的配置节点相应的更改 ...

  4. ural 1437. Gasoline Station

    1437. Gasoline Station Time limit: 1.0 secondMemory limit: 64 MB Once a gasoline meter broke at a fi ...

  5. ural 1155. Troubleduons

    1155. Troubleduons Time limit: 0.5 secondMemory limit: 64 MB Archangel of the Science is reporting:“ ...

  6. extjs tips

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. BZOJ1111 : [POI2007]四进制的天平Wag

    POI2007完结撒花~ 首先将n转化为四进制,从低位到高位DP f[i]表示这一位不向下一位借位 g[i]表示这一位向下一位借位,但借的那个不算在i f[0]=0,g[0]=inf f[i]=mer ...

  8. 洛谷 P1908 逆序对 Label：归并排序||树状数组 不懂

    题目描述 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不喜欢再玩那种你追我赶的游戏,现在他们喜欢玩统计.最近,TOM老猫查阅到一个人类称之为“逆序对”的东西,这东西是这样定 ...

  9. BZOJ2738: 矩阵乘法

    Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. Input 第一行两个数N,Q,表示矩阵大小和询问组数: 接下来N行N列一共N*N个数,表示这个矩阵: ...

  10. Oracle--10(ROW_NUMBER() OVER)

    一.定义 语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这 ...