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. 性能测试工具Locust

    An open source load testing tool. 一个开源性能测试工具. define user behaviour with python code, and swarm your ...

  2. 解决ArcGIS中因SDE或数据库配置问题而导致服务宕掉的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 最近连续有两个项目现场出现了AGS服务荡掉的问题,一个是通州 ...

  3. 代码的坏味道（2）——过大的类(Large Class)

    坏味道--过大的类(Large Class) 特征 一个类含有过多字段.函数.代码行. 问题原因 类通常一开始很小,但是随着程序的增长而逐渐膨胀. 类似于过长函数,程序员通常觉得在一个现存类中添加新特 ...

  4. [开源 .NET 跨平台 数据采集 爬虫框架: DotnetSpider] [二] 基本使用

    [DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 使用环境 Visual Studio 2015 or later .NET 4 ...

  5. NanUI for Winform发布，让Winform界面设计拥有无限可能

    如今,尽管WPF.UWP大行其道,大有把Winform打残干废的趋势.但是还是有那么一波顽固不化的老家伙们固守着Winform,其中就包括我. 好吧,既然都说Winform做得软件不如WPF界面美观效 ...

  6. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  7. FactoryMethodPattern（工厂方法）

    /** * 工厂方法模式 * 分为四部分 * 1.产品接口 * 2.产品实例 * 3.工厂接口 * 4.工厂实例 * 工厂类最好用单例模式,但在这里主要是说明工厂方法,就不用单例了 * @author ...

  8. JMeter专题系列（七）聚合报告之 90% Line

    JMeter 官网原文: 90% Line - 90% of the samples took no more than this time. The remaining samples at lea ...

  9. 第二十六章 hystrix-dashboard + turbine

    一.使用turbine的意义 引入多个hystrix stream: 1.使用hystrix-dashboard的可以添加多个stream的功能 图中添加的两个stream会在真正monitor的时候 ...

  10. 函数模块：CTVB_COMPARE_TABLES--两个表中删除/变更/粘贴分解

    这个函数模块比较两个内表,将被删除.增加和修改的内表行分别分组输出. 输入参数:TABLE_OLD:旧表TABLE_NEW:新表KEY_LENGTH:键长度,指定内表中的前若干个字节(在 Unicod ...