CSS伪元素是用来添加一些选择器的特殊效果。用于：向某个选择器中的文字的首行。

㈠语法

①伪元素的语法：

selector:pseudo-element {property:value;}

②CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

㈡:first-line 伪元素

⑴"first-line" 伪元素用于向文本的首行设置特殊样式。

⑵"first-line" 伪元素只能用于块级元素。

⑶下面的属性可应用于 "first-line" 伪元素：

  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

⑷示例：浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>:first-line</title> 

<style>

p:first-line

{

color:deeppink;

font-variant:small-caps;

}

</style>

</head>

<body>

<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>

</body>

</html>

效果图：

 

㈢:first-letter 伪元素

⑴"first-letter" 伪元素用于向文本的首字母设置特殊样式

⑵"first-letter" 伪元素只能用于块级元素。

⑶下面的属性可应用于 "first-letter" 伪元素：

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

⑷示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>首字母特殊样式</title>

<style>

p:first-letter {

                 color:#ff0000;

                 font-size:xx-large;

               }

</style>

</head>

<body>

<p>用美好的心情去面对接下来会发生的每一件事。</p>

</body>

</html>

效果图：

 

㈣伪元素和CSS类

伪元素可以结合CSS类

示例：使所有 class 为 article 的段落的首字母变为红色。

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

㈤多个伪元素

示例：段落的第一个字母将显示为红色，其字体大小为 xx-large。

           第一行中的其余文本将为蓝色，并以小型大写字母显示。

           段落中的其余文本将以默认字体大小和颜色来显示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>结合示例</title>

<style>

p:first-letter

{

    color:deeppink;

    font-size:xx-large;

}

p:first-line

{

    color:blue;

    font-variant:small-caps;

}

</style>

</head>

<body>

<p>洗尽铅华始见金，褪去浮华归本真</p>

</body>

</html>

效果图：

 

㈥CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1>元素前面插入一幅图片：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>：before</title>

<style>

h1:before {content:url(smiley.gif);}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The :before pseudo-element inserts content before an element.</p>

<h1>This is a heading</h1>

<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>

</body>

</html>

效果图：

 

㈦CSS - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>：after</title>

<style>

h1:after {content:url(smiley.gif);}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The :after pseudo-element inserts content after an element.</p>

<h1>This is a heading</h1>

<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>

</body>

</html>

效果图：

 

㈧所有CSS伪类/元素

CSS 的伪元素是什么？的更多相关文章

  1. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  2. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  3. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  4. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  5. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  6. 笑谈CSS的伪元素

    今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...

  7. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  8. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. 使用feign上传图片

    1.添加依赖,支持SpringEncoder <dependency> <groupId>io.github.openfeign.form</groupId> &l ...

  2. 坦克大战--Java类型 ---- （1）音乐播放

    实现原理 我用接口java.applet.AudioClip实现音乐播放,那么我们需要了解这个接口的情况. 我们主要使用其中的三个方法: (1)void loop(); //循环播放(2)void p ...

  3. python爬虫简介

    一.什么是网络爬虫? 网络爬虫,是一种按照一定规则,自动的抓取万维网信息的程序或者脚本. 二.python网络爬虫, 需要用到的第三方包 requests和BeautifulSoup4 pip ins ...

  4. [转载]ubuntu常用命令

    1.帮助      --help简单的帮助      help command 较详细的帮助      man command 最详细的帮助2.ls 命令      ls -a 显示全部的文件及文件夹 ...

  5. 转换byte(十进制)为图形（大小写字母，符号）

    /** * 转换byte(十进制)为字母 */ public static String ByteToLetter (byte[] chars) { String Letter = "&qu ...

  6. Nginx如何配置https证书？

    #把80端口请求跳转到443端口 server { listen 80; server_name 域名; return 301 https://$http_host$request_uri; } se ...

  7. 自动化测试报告之allure使用基础指南

    差不多三个月前些的教程,然后跳槽了,自定义模块还没有写....后续也不知道有时间补上没有,最近应该会毕竟专注app测试这块了     1.github下载allure安装包:https://githu ...

  8. linux上如何安装postgresql

    安装对应的postgresql的yum源 rpm -Uvh https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-7-x86_64 ...

  9. Ext4文件系统修复

    Ext4文件系统修复 目录 一. super block........................................................................ ...

  10. cmd中subst的使用

    SUBST [drive1: [drive2:]path] drive1:        指定要指派路径的虚拟驱动器.[drive2:]path  指定物理驱动器和要指派给虚拟驱动器的路径. 路径替换 ...