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. ECMAScript 6 开篇准备

    1前言 该系列文章均为学习阮一峰老师<ECMAScript 6 入门>一书的学习笔记.原著:http://es6.ruanyifeng.com/ 各大浏览器的最新版本,对ES6的支持可以查 ...

  2. SDN/NFV若干问题

    1.首先谈一谈网络技术和组网技术的关系 网络可分为两层:业务网.承载网.业务网主要是组织业务系统,而承载网主要是用来传输信息流:包括传送网(点到点数据专线).数据网(端到端连接).内容分发网(点到多点 ...

  3. PHP中的魔术方法（2）

    1.__get.__set这两个方法是为在类和他们的父类中没有声明的属性而设计的__get( $property ) 当调用一个未定义的属性时访问此方法__set( $property, $value ...

  4. “SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间。”

    原因: .NET中  DateTime最小值为: 0001-1-1 0:00:00 数据库中DateTime最小值为: 1753-1-1 0:00:00, 很明显:.NET中的最小值超出了数据库时间类 ...

  5. 使用c#对windows进行关机、重启或注销

    方法一:调用windows自带的shutdown.exe (缺点:会出现倒计时窗口) System.Diagnostics.Process.Start("shutdown.exe" ...

  6. 客户端调用 WCF 的几种方式

    转载网络代码.版权归原作者所有..... 客户端调用WCF的几种常用的方式: 1普通调用 var factory = new DataContent.ServiceReference1.Custome ...

  7. java数据类型

    对String来说,”==“是用来判断两个字符串(对象)的地址是否相同,即判断是否是同一个字符串的应用.”equals()“则是判断两个字符串(对象)的值是否相等,如果相等则返回true.一般情况下, ...

  8. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  9. 如何用ORM支持SQL语句的CASE WHEN？

    OQL如何支持CASE WHEN? 今天,一个朋友问我,OQL可否支持CASE WHEN语句?他给的示例SQL如下: then '启用' else '停用' from tb_User OQL是SOD框 ...

  10. 正则匹配test

    var t='VARCHAR(5)' var pattern=/VARCHAR\(\d+\)/g pattern.test(t)//true test()返回false true 但是有哪位小伙伴能告 ...