CSS 伪元素 (Pseudo-elements)实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓(Outline)实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01制作首字母特效

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>01制作首字母特效</title>
<style type="text/css">
p:first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head> <body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body> </html>


02制作首行特效

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>02制作首行特效</title>
<style type="text/css">
p:first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head> <body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body> </html>


CSS 伪元素 (Pseudo-elements) 总结

W3School-CSS 伪元素 (Pseudo-elements) 实例的更多相关文章

  1. CSS 伪元素

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

  2. css伪元素用法大全

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

  3. CSS——伪元素

    CSS伪元素 伪元素的语法: selector:pseudo-element {property:value;} 作    用 添加特殊样式 :first-line 伪元素 "first-l ...

  4. CSS:CSS 伪元素

    ylbtech-CSS:CSS 伪元素 1.返回顶部 1. CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {pro ...

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

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

  6. css 伪元素分享!!!

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

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

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

  8. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  9. css伪元素

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

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

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

随机推荐

  1. spring4+hibernate4+struts2项目整合的步骤及注意事项

    首先,在整合框架之前,我们需要知道Spring框架在普通Java project和Web project中是略有不同的. 这个不同地方就在于创建IOC容器实例的方式不同,在普通java工程中,可以在m ...

  2. C#的DataTable操作方法

    1.将泛型集合类转换成DataTable(表中无数据时使用): public static DataTable NullListToDataTable(IList list) { var result ...

  3. Android Toast cancel和show 不踩中不会知道的坑

    说到Android Toast,几乎都很熟悉吧,下面讲讲怎么实现下面几种场景: 1.连续点击一个按钮,每次都产生一个新的Toast并且调用show方法 问题:触发了toast以后,toast内容会一直 ...

  4. Net设计模式实例之单例模式( Singleton Pattern)

    一.单例模式简介(Brief Introduction) 单例模式(Singleton Pattern),保证一个类只有一个实例,并提供一个访问它的全局访问点.单例模式因为Singleton封装它的唯 ...

  5. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  6. DataSet转化为实体集合类

    /// <summary> /// DataSet转换为实体类 /// </summary> /// <typeparam name="T">实 ...

  7. jsp页面显示问题

    一.在jsp页面的表格中,如果有表格中的某一个元素 内容太长,需要截取显示,方法如下: <%@ taglib prefix="fn" uri="http://jav ...

  8. 浅谈Slick(1)- 基本功能描述

    Slick (Scala language-integrated connection kit)是scala的一个FRM(Functional Relational Mapper),即函数式的关系数据 ...

  9. Lind.DDD.Domain.ISortBehavor~上移与下移

    在进行列表排序时,有个“上移”和“下移”操作,这个一般在内存里完成,然后统一提交到数据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如 ...

  10. Xdebug文档(五) 代码覆盖分析

    代码覆盖分析能在请求时让你知道脚本哪一行(或哪一段)在执行. 相关设置 xdebug.coverage_enable 类型: boolean, 默认值: 1, 始于 Xdebug >= 2.2 ...