:before\:after伪元素用法
:before和:after这两个伪元素在真正的页面元素之前和之后插入一个额外的的元素,等效于下面的代码:
<p>
<span>:before</span>
HTML中真正的内容
<span>:after</span>
</p>
在HTML的源代码里面是找不到伪元素的内容的。
用法
:before和:after伪元素在p元素之前和之后插入新内容,使用content属性,并且可以设置css属性。
p:before{
content:open-quote;
color:#fff;
}
p:after{
content:close-quote;
color:#000;
}
在默认的情况下,这两个伪元素生成的元素是内联元素,如果要设置宽度和高度,需要先display:block;
伪类和伪元素可以同时使用,如:
p:hover:before,p:hover:after{
background-color:#aaa;
}
:after还可以用来清除浮动
.clear:after{display:block;content:"";width:0;clear:both;}
:before\:after伪元素用法的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS——你所不知的 CSS ::before 和 ::after 伪元素用法(转)
你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...
- 你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- css伪类及伪元素用法
注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active 大致效果为用鼠标 ...
- [转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...
- CSS你所不知的伪元素的用法
你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5 CSS 有两个说不上常用的伪类 :before 和 :after, ...
- css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
随机推荐
- JQuery 遍历子元素+ each函数的跳出+提取字符串中的数字
最近脑袋迷糊的如同一团浆糊,一直出错. HTML代码如下图,现在想实现的功能是根据Ajax请求,获取到具体的button,以更新其样式.由于Button较多,每个Button都设置id,没有意义,想通 ...
- css 实现三角形的原理
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- linux笔记五-------编辑器
1. 三种模式 命令(默认).尾行.编辑模式 2. 尾行模式 : :q 退出vi编辑器 :w 保存修改 :wq 保存并退出编辑 :q! ...
- UIBezierPath 的使用
使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线 ...
- javascript中判断对象类型
<script type="text/javascript"> //判别一个对象属性在不在某个对象中 //in 是用于查找某个属性是否存在于对象中,它会把对象 //里面 ...
- c3p0数据库连接池死锁问题
项目进行压力测试的时候,运行大概1小时候,后台抛出以下异常: Nov 9, 2012 1:41:59 AM com.mchange.v2.async.ThreadPoolAsynchronousRun ...
- CSS水平居中
三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...
- Java 创建过滤器 解析xml文件
今天写了一个过滤器demo,现在是解析actions.xml文件,得到action中的业务规则:不需要导入任何jar包 ActionFilter过滤器类: package accp.com.xh.ut ...
- CentOS6修改主机名(hostname)及 修改/etc/hosts 文件,增加ip和hostname的映射关系(转)
CentOS修改主机名(hostname) 需要修改两处:一处是/etc/sysconfig/network,另一处是/etc/hosts,只修改任一处会导致系统启动异常.首先切换到root用户. ...
- [QGLViewer]First Demo
Dependencies: QGLViewer2.6.3 Win7 64bit VS2010 直接使用QGLViewer文件夹下的Pro文件在VS2010中可以编译成64位的Dll. 用外面的libQ ...