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. CSS实现的手风琴特效

    CSS样式: //图像个数 @imageN:5; //图像hover之前的总宽度 @w:800px; //图像hover之后的宽度 @imageL:640px; //图像hover之前的宽度 @ima ...

  2. 解决域名DNS解析的故障

    在实际应用过程中可能会遇到DNS解析错误的问题,就是说当我们访问一个域名时无法完成将其解析到IP地址的工作,而直接输入网站IP却可以正常访问,这就是因为DNS解析出现故障造成的.这个现象发生的机率比较 ...

  3. C#正则表达式验证

    public class VerifyUtil { /// <summary> /// 判断输入的字符串只包含汉字 /// </summary> /// <param n ...

  4. 转载：《TypeScript 中文入门教程》 15、可迭代性

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 可迭代性 当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的. ...

  5. 使用python发送和接收邮件

    关于电子邮件 大学之前,基本不用邮箱,所以基本感觉不到它的存在,也不知道有什么用:然而大学之后,随着认识的人越来越多,知识越来越广泛,邮箱已然成为很重要的通讯工具,大学一些课程作业需要有邮箱发给老师, ...

  6. 从零开始学 Java - CentOS 下安装 Tomcat

    生活以痛吻我,我仍报之以歌 昨天晚上看到那个冯大辉老师的微信公众号,「小道消息」上的一篇文章,<生活以痛吻我,我仍报之以歌>.知乎一篇匿名回答,主题为<冯大辉到底是不是技术大牛,一个 ...

  7. tomcat 7 WARNING: A context path must either be an empty string or start with a '/' and do not end with a '/'. The path [/] does not meet these criteria and has been changed to []

    tomcat 7 WARNING: A context path must either be an empty string or start with a '/' and do not end w ...

  8. Linux下清理内存和Cache方法 /proc/sys/vm/drop_caches

    Linux下清理内存和Cache方法 /proc/sys/vm/drop_caches 频繁的文件访问会导致系统的Cache使用量大增 $ free -m total used free shared ...

  9. cessss

    [文字] 关注1啊啊啊啊啊 点击关注微信 点击关注微信2 点击关注微信3 关注2啊啊啊啊啊啊啊啊啊啊啊 关注3啊啊啊啊啊啊啊啊 关注4啊啊啊啊啊啊啊啊 关注5啊啊啊啊啊啊啊啊 关注6啊啊啊啊啊啊啊啊啊 ...

  10. SharePoint 2013 Designer系列之数据视图筛选

    在SharePoint中,我们经常需要对列表进行简单的筛选,这时,数据视图就有作用了,我们可以定制对于字段的筛选,来进行展示:特别的,筛选不同于搜索,并没有对于附件或者文档的全文检索,如果需要全文检索 ...