CSS的伪类 :before 和 :after

今天在尝试用CSS3做android robot的时候 (http://jsfiddle.net/crabyan/bJVHU/4/)

发现了参考例子里面的一个CSS3伪类 :before :after

最近对于新知识确实落后了，必须恶补

:before 伪元素在元素之前添加内容。
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

举例：

<style>
#test_1:before {content:url(http://static.cnblogs.com/images/adminlogo.gif)}
</style><p id="test_1" style='border:1px solid #ddd;'>测一测</p>

实际效果：

测一测

实际效果如上，会在元素内的前端加上一个元素，以前这么做需要依赖JS，而现在CSS3就可以搞定。

:after 也是同理。

转载于:https://www.cnblogs.com/crabzzz/archive/2012/07/20/2600987.html

CSS的伪类 :before 和 :after相关推荐

CSS :active 伪类
:active -- CSS :active 伪类,适用于一个元素被激活时的样式语法: :active CSS版本:CSS1 引用网址:http://www.dreamdu.com/css/pseu ...
[css] CSS的伪类和伪对象有什么不同？
[css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...
CSS:hover伪类使用
CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...
html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
html css链接伪类大全,什么是css链接伪类？
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
CSS :has伪类
CSS :has伪类 1 概述 2 实例说明 2.1 表单元素前面加* 2.2 拖拽列表 2.3 多层级hover 2.4 评星组件 3 兼容性 1 概述 :has()表示满足一定条件后,就会匹配该元 ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...

CSS的伪类 :before 和 :after

CSS的伪类 :before 和 :after相关推荐

最新文章

热门文章