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. hibernate笔记--组合主键映射方法

    一个数据库表中其主键有可能不止一个属性,同样映射到实体类中,可能有两个或多个属性共同配置成为一个主键,假设一个实体类Score,其主键有两个属性stuId(学生编号)和subjectId(科目编号), ...

  2. 探秘Tomcat——连接篇

    前两篇我们分别粗线条和细粒度的讲解了tomcat的服务是如何启动以及连接器Connector和容器Container又分别是如何被启动的. 本篇我们主要侧重tomcat中server.service以 ...

  3. Fragment基础----信息传递

    如何通过activity来访问fragment的信息呢,我们可以通过一个实例来了解. 使用两个Fragment和一个activity管理 效果图: 第一个fragment来表示输入框 第二个fragm ...

  4. Android中TextView setText int 报错

    在对中TextView setText 覆值int 时报错,网上查下原因是setText整型表明是设值R.id.xxx,当然找不到. 解决方法是将int转化为string,用String.valueO ...

  5. Elasticsearch+Logstash+Kibana教程

    参考资料 累了就听会歌吧! Elasticsearch中文参考文档 Elasticsearch官方文档 Elasticsearch 其他——那些年遇到的坑 Elasticsearch 管理文档 Ela ...

  6. Java进击C#——语法之面向对象

    本章简言 上一章笔者讲到关于ADO.NET相关的知识,知道了如何去访问数据库.本章将来讲关于面向对象的思想.不管在JAVA还是在C#面向对象思想的重要性都是占了一个很大的成份.往往他就像呼吸一样子,更 ...

  7. react入门（1）

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  8. Sql Server 备份还原失败错误ERROR:3145(备份集中的数据库备份与现有的数据库不同)及解决办法

    SQL Server备份文件bak,备份后还原出现错误3145,备份集中的数据库备份与现有的 'xxx' 数据库不同. 解决办法如下: 1,新建一个与现有数据库重名的数据库. 如果您不知道数据库名称, ...

  9. 数据结构：顺序表（python版）

    顺序表python版的实现(部分功能未实现) #!/usr/bin/env python # -*- coding:utf-8 -*- class SeqList(object): def __ini ...

  10. Linux实战问题解决方案（1）：Could not get lock

    环境: Ubuntu12.04 问题描述: Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily un ...