教你玩转CSS 伪元素
一、CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法:
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:
selector.class:pseudo-element {property:value;}
1.:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化:
p:first-line {
color:#ff0000;
font-variant:small-caps;
}
注意:“first-line” 伪元素只能用于块级元素。
注意: 下面的属性可应用于 “first-line” 伪元素:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
2.:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式:
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
注意: “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
二、伪元素和CSS类
伪元素可以结合CSS类:
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
1.多个伪元素
可以结合多个伪元素来使用。
在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
2.CSS - :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片:
h1:before {
content:url(smiley.gif);
}
3.CSS - :after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片:
h1:after {
content:url(smiley.gif);
}
所有CSS伪类/元素
教你玩转CSS 伪元素的更多相关文章
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- js如何控制css伪元素内容(before,after)
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
随机推荐
- XCTF-黑客精神
杂言 前段时间键盘坏了,电脑硬盘也坏了,买东西装系统再偷个懒放了一周左右假.期间学习巩固了一下安卓开发的知识.用了固态才知道什么叫纵享丝滑,当初就不该省这个钱. 前期工作 查壳,无.运行,点击按钮就跳 ...
- HTML5.1 新增的14项特性学习
1.防止网络钓鱼攻击 使用target=_'blank'时, 新打开的标签可以更改window.opener.location到一些钓鱼网站,它会在开放页面上代表你执行一些Javascript代码.为 ...
- Redis-设置Key的过期时间及相关策略
Redis-设置Key的过期时间及相关策略 1.设置key的过期时间 1.1expire key second:设置key的过期时间(秒) 1.2ttl key:查看key的有效期 1.3persis ...
- hadoop知识点总结(三)YARN设计理念及基本架构
YARN设计理念与基本架构 1,MRv1的局限性:扩展性差,可靠性差,资源利用率低,无法支持多种计算框架 2,YARN基本设计思想 1)基本框架对比 Hadoop1.0中,JobTracker由资源管 ...
- fedora 20安装vim Transaction check error
Transaction check error安装时 yum remove vim-minimal 再安装vim ok
- 小白搭建WAMP详细教程---apache安装与设置
一.apache官网下载Apache HTTP Server服务器 1.打开apache官网http://www.apache.org/,拉到最底下,找到HTTP Server,点击进去下载.也可以直 ...
- ODS(Operational Data Store)定义
ODS(Operational Data Store)可操作的数据存储. 很多人对ODS究竟是什么有很多的困惑,ODS对于不同的人可以有不同的看法,我主要说说什么是最主流的定义.首先我们需要注意,OD ...
- k8s 调度 GPU
最近公司有项目想在 k8s 集群中运行 GPU 任务,于是研究了一下.下面是部署的步骤. 1. 首先得有一个可以运行的 k8s 集群. 集群部署参考 kubeadm安装k8s 2. 准备 GPU 节点 ...
- CF Hello 2020 E.New Year and Castle Construction
E.New Year and Castle Construction 题意 给定n个点,对于每个点\(p\),求出4-point 子集(该子集有四个点,并且围成的圈包含\(p\))的个数 数据给的点中 ...
- nginx+lua实现灰度发布/waf防火墙
nginx+lua 实现灰度发布 waf防火墙 课程链接:[课程]Nginx 与 Lua 实现灰度发布与 WAF 防火墙(完)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 参考博客 Nginx ...