CSS中的伪元素简介
segmentfault 发布时间：2015-08-01 19:08:57 作者：dopppler 
我要评论
我要评论这篇文章主要介绍了CSS中的伪元素,是CSS入门学习中的基础知识,需要的朋友可以参考下
顾名思义，伪元素就是你的文档中若有实无的元素。
::first-letter伪元素
格式：
CSS Code复制内容到剪贴板
- e::first-letter
示例：
CSS Code复制内容到剪贴板
- p::first-letter {font-size:300%;}
提示：如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上标签，
然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。
::first-line伪元素
格式：
CSS Code复制内容到剪贴板
- e::first-line
示例：
CSS Code复制内容到剪贴板
- p::first-line {font-variant:small-caps;}
说明：选中文本段落（一般情况下是段落）的第一行。
::before和::after伪元素
格式：
CSS Code复制内容到剪贴板
- e::before
- e::after
示例：
对标记：
CSS Code复制内容到剪贴板
- <p class="age">25</p>
添加如下样式：
CSS Code复制内容到剪贴板
- p.age::before {content:"Age: ";}
- p.age::after {content:" years.";}
会得到如下结果：
复制代码
代码如下:Age: 25 years.
提示：如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。
因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明
性文字。
相关文章
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
这篇文章主要介绍了通过CSS3的object-fit来调整图片适配尺寸的技巧,包括用object-fit来居中并裁剪图片的方法,需要的朋友可以参考下2016-02-27- 这篇文章主要介绍了CSS计数器counter()的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-09-26
- 这篇文章主要介绍了CSS中的各种选择符,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-17
- 这篇文章主要介绍了Markdown.css样式,用来实现显示强大的Markdown样式的文本,需要的朋友可以参考下2015-07-16
- CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局2014-05-03
定义css设备类型-Media Queries图表简介及使用方法
CSS3完美地解决了让同一个网站同时适应完全不同尺寸的屏幕这些问题;css3提出的MediaQueries解决了为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式2013-01-21css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08- 本文主要介绍了通用的css hack2012-07-11
- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢?下面让我2012-05-31
- 国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位.2009-12-27
最新评论