伪元素选择器:before 以及 :after
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理
":" 与 "::" 区别在于区分伪类和伪元素
重点:E::before、E::after
是一个行内元素,需要的时候可以自行转换成块元素
:before 伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。语法结构是:
<元素>:before {
content:文字/url(图片的路径 )
}
content 属性用来指定需要插入的具体内容,该内容可以是文本也可以是图片


:after 选择器



图片和文字是在一行的,如果宽度不够,图片就掉下去。
伪元素选择器:before 以及 :after的更多相关文章
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS_03_04_CSS伪元素选择器
第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端-CSS-4-伪类选择器&伪元素选择器
1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- css 伪元素选择器
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...
随机推荐
- AJAX核心XMLHTTPRequest对象
老早就写好了总结.今天整理发表一下. XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象.AJAX能够像桌面应用程序一样仅仅 ...
- zabbix基于SNMP 协议监控路由器
zabbix基于SNMP 协议监控路由器 步骤 步骤超级方便. 1. 路由器上开启snmp 2. 确保外网能訪问到 3. 用snmpwalk測试 4. 加入zabbix主机,SNMP interfac ...
- diamond简介和使用
简介 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单.可靠.易用,目前淘宝内部绝大多数系统的配置,由diamond来进行统一管理. diamond为应用系统提供了获取配置的服务, ...
- Android应用之——最新版本号SDK V2.4实现QQ第三方登录
为什么要写这篇博客呢?由于.我在做这个第三方登录的时候,找了非常多资料,发现要么就是过时了.要么就是说的非常不清楚.非常罗嗦.并且非常多都是一些小demo,不是什么实例.甚至连腾讯官方的文档都有这个问 ...
- python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题
问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...
- gson如何转化json数组
String.JsonObject.JavaBean 互相转换 User user = new Gson().fromJson(jsonObject, User.class); User user = ...
- Mac JDK 多版本共存
1. 安装各JDK版本,安装后通过Java -version检测是否安装好 2. 打开~/.bash_profile,没有的话创建 vim ~/.bash_profile ...
- POJ2976 Dropping tests —— 01分数规划 二分法
题目链接:http://poj.org/problem?id=2976 Dropping tests Time Limit: 1000MS Memory Limit: 65536K Total S ...
- Android Studio 3.0.1模拟器启动报错Emulator: glClear:466 GL err 0x502
启动模拟器时,报了一大堆以上错误 启动起来之后, Emulator的画面没有正常显示, 点击鼠标会闪烁, 有时还会上下颠倒 有可能是驱动版本太低不支持一些特性,因此就下载个驱动精灵.升级了显卡驱动,结 ...
- Caused by: java.lang.IllegalArgumentException: Malformed \uxxxx encoding.
application.properties中不能含有\符号. 只要遇到就会报这个错误. 解决方式:将application.properties中的 \ 改为 \\ 或者 /