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. HTTP报文格式

    请求报文 <method><SP><uri><SP><version><CRLF> <head-name><: ...

  2. 【quartz】 入门-配置文件

    quartz 启动 NameValueCollection props = (NameValueCollection)ConfigurationManager.GetSection("qua ...

  3. php 彩票类 lottery

    <?php /* * For the full copyright and license information, please view the LICENSE * file that wa ...

  4. cocos2dx中的动作

    CCAction是cocos2dx中专门用来处理动作相关的类,几乎所有的与动作相关的类都是从它派生而来的.而CCAction继承自CCObject class CCFiniteTimeAction : ...

  5. sql2008还原问题

    2003的服务器系统不知是因为对SSD的支持不好还是别的原因,系统使用有很多奇怪的问题,所以就升级一下系统,在备份数据库的时候出现了各种问题 源数据库与现数据库都为sqlserver2008,并都安装 ...

  6. iOS10相册相机闪退bug-b

    iOS10系统下调用系统相册.相机功能,遇到闪退的情况,描述如下: This app has crashed because it attempted to access privacy-sensit ...

  7. c++ std::string 用法

    std::string用法总结 在平常工作中经常用到了string类,本人记忆了不好用到了的时候经常要去查询.在网上摘抄一下总结一下,为以后的查询方便: string类的构造函数: string(co ...

  8. PE文件结构详解(一)基本概念

    PE(Portable Execute) 文件是Windows下可执行文件的总称,常见的有DLL,EXE,OCX,SYS等,事实上,一个文件是否是PE文件与其扩展名无关,PE文件可以是任 何扩展名.那 ...

  9. Ajax出入江湖

    window.onload = initAll; var xhr = false; function initAll() { if (window.XMLHttpRequest) { xhr = ne ...

  10. SQL语句备忘

    SELECT beatid,COUNT(d.id) dongnicount FROM `bed_beat_dongni` d INNER JOIN bed_beat b on b.id = d.bea ...