前端开发

 首页 > 前端开发 > css教程 > CSS中的伪元素详细解答

CSS中的伪元素详细解答

分享到:
【字体:
导读:
          本教程讲解CSS中的伪元素详细解答 顾名思义,伪元素就是你的文档中若有实无的元素。 ::first-letter伪元素 格式: CSS Code复制内容到剪贴板 e::first-letter 示例: CSS Code复制内容到剪贴板...

本教程讲解CSS中的伪元素详细解答

顾名思义,伪元素就是你的文档中若有实无的元素。
::first-letter伪元素

格式:

CSS Code复制内容到剪贴板

  1. e::first-letter

示例:

CSS Code复制内容到剪贴板

  1. p::first-letter {font-size:300%;}

    提示:如果不用伪元素创建这个首字符放大效果,必须手工给该字母加上标签,
    然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。

::first-line伪元素

格式:

CSS Code复制内容到剪贴板

  1. e::first-line  

示例:

CSS Code复制内容到剪贴板

  1. p::first-line {font-variant:small-caps;}  

说明:选中文本段落(一般情况下是段落)的第一行。

::before和::after伪元素

格式:

CSS Code复制内容到剪贴板

  1. e::before   

  2. e::after  

示例:
对标记:

CSS Code复制内容到剪贴板

  1. 25

      

添加如下样式:

CSS Code复制内容到剪贴板

  1. p.age::before {content:"Age: ";}   

  2. p.age::after {content:" years.";}  

会得到如下结果:

复制代码

代码如下:

Age: 25 years.

    提示:如果标签中的内容是通过数据库查询生成的结果,那么用这种技巧再合适不过了。
    因为所有结果都是数字,使用这两个伪元素可以在把数字呈现给用户时,加上说明
    性文字。

分享到:
CSS中的字体属性的使用详解
本教程讲解CSS中的字体属性的使用详解  字体族 font-family 示例: CSS Code复制内容到剪贴板 h2 {font-family:times, serif;}     注意:如果一个字体名多于一个单词(有空格),应该加上引号。    例如:body {font-family:"trebuchet ms", tahoma, sans-serif;} 字体大小 font-size 示例: CSS Code复制内容到...
CSS字体的加载加速如何优化
本文讲解CSS字体的加载加速如何优化 除了各种特定字体系列外(如 Times、Verdana、Helvetica 或 Arial),CSS定义了 5 种通用字体系列: Serif 字体     这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……