一、总结:

::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容

::before ::after与:before  :after的区别:css3中修订后的伪元素使用::两个冒号,使用单冒号和双冒号的功能还是一样,IE8只支持单冒号的伪元素,所以使用单冒号的最安全。

关于伪元素和伪类(选择器):

伪元素:

伪类选择器:

二、实例:

表单没有添加冒号的情况:

1. :before

2. :after

css之伪类选择器:before :after(::before ::after)的更多相关文章

  1. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  2. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  3. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  4. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  5. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  6. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  8. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  9. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

随机推荐

  1. val() 和attr() 取值的问题

  2. html 和 body详解

    1.背景色 当不设置html的时候,html的属性不生效,浏览器会捕获body的颜色作为浏览器背景颜色,如果html生效了,则会捕获html的颜色作为浏览器背景颜色. [例1:不设置 html] bo ...

  3. The implementation of Lua 5.0 阅读笔记(二)

    6 线程和协程 读完这篇文章我才意识到python的协程到底缺了什么,这个就是coroutine和semi-coroutine的区别了.区别就是,semi-coroutine只能返回(yield)到调 ...

  4. 【题解】【排列组合】【素数】【Leetcode】Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  5. dedecms 列表每隔6行输出一个空li

    {dede:list pagesize='33'} <li class="hang"><a href="[field:arcurl/]" ta ...

  6. 【转】使用cocos2d-console工具转换脚本为字节码

    从Cocos2D-X v2.1.4版本开始,增加了Cocos2D-console命令行工具,该工具的其中一个功能是:把.js文件转换为.jsc文件,该文件是字节码格式,可以提高代码的安全性. 使用这个 ...

  7. vcf_filter.py

    pyvcf 中带的一个工具 比其他工具用着好些 其他filter我很信不过~~  自己写的功能又很有限 所以转投vcf_filter.py啦 Filtering a VCF file based on ...

  8. twisted 初体验

    前言: 最近帮朋友review其模块服务代码, 使用的是python的twisted网络框架. 鉴于之前并没有使用过, 于是决定好好研究一番. 个人接触最早的高性能网络编程框架是Mina, 所谓先入为 ...

  9. 一个textview实现文字在图片上面的效果

    类似于这样的,其实很简单,可是以前用的是imageview+textview.布局实现多写了好多代码.又不能在图片加文字,显得没技术含量. xml代码如下: <TextView android: ...

  10. Codeforces Round #114 (Div. 2)

    Codeforces Round #114 (Div. 2) 代码 Codeforces Round #114 (Div. 2) C. Wizards and Trolleybuses 思路 每条车的 ...