CSS伪元素用于向某些选择器设置特殊效果。

伪元素的用法和伪类相似:

selector:pseudo-element {property:value;}

CSS类也可以与伪元素配合使用:

selector.class:pseudo-element {property:value;}

:first-line伪元素:向文本的首行设置特殊样式。

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

:first-letter伪元素:向文本的首字母设置特殊样式。

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

CSS2-:before伪元素:可以在元素的内容前面插入新内容。

h1:before
{
content:url(logo.gif);
}

CSS2-:after伪元素:可以在元素的内容之后插入新内容。

h1:after
{
content:url(logo.gif);
}

伪元素和CSS类:

p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>

多重伪元素:可以结合多个伪元素使用

p:first-letter
{
color:#ff0000;
font-size:xx-large;
} p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

(六)CSS伪元素的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  5. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  6. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  7. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  8. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  9. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. STL算法

    STL算法部分主要由头文 件<algorithm>,<numeric>,<functional>组成.要使用 STL中的算法函数必须包含头文件<algorit ...

  2. NodeJS - Express 3.0下ejs模板使用 partial展现 片段视图

    如果你也在看Node.js开发指南,如果你也在一步一步实现 microBlog 项目!也许你会遇到本文提到的问题,如果你用的是Express 3.0 本书实例背景是 Express 2.0 而如今升级 ...

  3. VBS基础篇 - 变量

    VBScript只有一种数据类型 —— Variant,它是根据上下文来判断是数字还是字符串.因为Variant是VBScript中唯一的数据类型,所以它也是VBScript中所有函数的返回值的数据类 ...

  4. anroid ndk编译ffmpeg 引用librtmp libx264

    Ffmpeg 无处不在,自然android系统少不了它,折腾了不少时间完成 ndk编译ffmpeg,生成so库中引用了外部库librtmp,libx264.条条大路通罗马, 也许还有别的更好的方法去完 ...

  5. BZOJ 2763: [JLOI2011]飞行路线 spfa dp

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=2763 题解: d[x][kk]表示从s到x用了kk次免费机会的最少花费. 代码: #in ...

  6. PE文件结构详解(四)PE导入表

    PE文件结构详解(二)可执行文件头的最后展示了一个数组,PE文件结构详解(三)PE导出表中解释了其中第一项的格式,本篇文章来揭示这个数组中的第二项:IMAGE_DIRECTORY_ENTRY_IMPO ...

  7. BitNami一键安装Redmine(转)

    1. 简介 对于一个新手,如果严格按照官方文档来安装redmine,我想会“疯”掉的.有没有一种简便的方法.有滴,那就是BitNami. BitNami提供redmine的一键安装程序,简单.易用.方 ...

  8. linq中查询列表的使用及iqueryable和list集合之间的转换

    linq中查询列表的使用及iqueryable和list集合之间的转换 比如要查询一个货架集合,但是只需要其id和name即可,可以用以下方法:先写一个model类:CatalogModel(注意该类 ...

  9. Eclipse Error: Unable to set localhost. This prevents creation of a GUID.

    Symptoms The following error appears in the atlassian-confluence.log: 2011-03-16 18:20:03,021 ERROR ...

  10. java数据结构学习(一)之二分查找

      二分查找法与我们在孩童时期玩过的猜数的游戏一样,这个游戏里一个朋友会让你猜他正想的一个1至100的数,当你猜了一个数后,他会告诉你三种选择的一个:你猜的比她想的大,或小,或猜中了.为了能用最少的次 ...