网页制作 
首页 > 网页制作 > 浏览文章

CSS中的伪元素简介

(编辑:jimmy 日期: 2024/11/19 浏览:3 次 )

顾名思义,伪元素就是你的文档中若有实无的元素。
::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. <p class="age">25</p>  

添加如下样式:

CSS Code复制内容到剪贴板
  1. p.age::before {content:"Age: ";}   
  2. p.age::after {content:" years.";}  

会得到如下结果:

复制代码代码如下:Age: 25 years.

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

上一篇:CSS3中的clip-path使用攻略
下一篇:CSS中的属性选择符和结构化伪类
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?