:before,:after伪元素

伪元素特性(目前已经遇到的)

  • 它不存在于文档中,所以js无法操作它
  • 它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字母;因此当伪元素被点击的时候触发的是主元素的click事件
  • 块级元素才能有:before, :after,譬如img就不能设置,亦即某些元素是没有:before, :after的,只要知道一般的块级元素都可以用就行了

注:css3中,为了与伪类区分,伪元素前应该使用两个冒号,即:hover伪类,::before伪元素。当然为了向下兼容,用一个冒号也是可以的,不过建议尽量使用规范的写法。

下拉图标

a::before{
width: 4px;
height: 4px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
display: block;
}

css学习笔记1的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  10. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

  1. javascript Function.prototype.bind

    语法: fn.bind(obj,arg1,arg2,arg3...) bind是es5新增的方法,顾名思义,它的作用是将函数绑定到某个对象上,就像是某个对象调用方法一样.其本质还是改变了该函数的上下文 ...

  2. 2013.7.19 STL库的学习

    STL提供了一组表示容器,迭代器,函数对象和算法的模板. 容器是一个与数组类似的单元,可以存储若干个值.容器是同质的,即存储的值的类型一样. 算法是完成特定任务的处方. 迭代器能够用来遍历容器的对象, ...

  3. C#线程池用法

    C#线程池用法 在C#编程语言中,使用线程池可以并行地处理工作,当强制线程和更新进度条时,会使用内建架构的ThreadPool类,为批处理使用多核结构,这里我们来看在C#编程语言中一些关于来自Syst ...

  4. [原]逆向iOS SDK -- _UIImageAtPath 的实现(SDK 5.1)

    注释过的反汇编代码:http://pan.baidu.com/share/link?shareid=3491166579&uk=537224442 伪代码(不精确,仅供参考): NSStrin ...

  5. Sparse Filtering

    Sparse Filtering 当前很多的特征学习(feature learning)算法需要很多的超参数(hyper-parameter)调节, Sparse Filtering则只需要一个超参数 ...

  6. 判断UA这种事不能说的太明。

    [微博] Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; GT-I9502 Build/JDQ39) AppleWebKit/534.30 (KHTML, l ...

  7. 温故而知新之java的collection framwork

    经常用到的List,Map等这些数据结构,都是来自于java的util包下,而java对于其整体设计,简称为collection framwork.(ps.其实,Map接口并不继承自collectio ...

  8. js框架漫谈

    现在实际项目中可供选择的javascript框架很多,热门的有jquery,dojo,mootools,ext等.这些框架按照不同的标准有不同的分类方法,比如按照扩展方式便可分为prototype式的 ...

  9. WINCE 电池状态(C#)

    WINCE 电池状态(C#) 分类:             电量              2013-04-18 12:08     397人阅读     评论(1)     收藏     举报   ...

  10. EasyUI tree扩展获取实心节点

    <script type="text/javascript"> //扩展 获得tree 的实心节点 $(function(){ $.extend($.fn.tree.m ...