css里面的伪元素主要是用来给选择器设置特殊效果。根据常用性,记录before和after。 “:before”伪元素用来在元素的内容前面添加新的元素。比如标题前面会有一个小方块,就可以通过‘ :before ’来添加。

.title:before{
content:'';
height:30px;
width:4px;
background:#eee;
}

同理,‘ :after ’就是在元素的内容后面添加新元素。

css伪元素之before和after的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  5. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  6. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  7. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  10. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux中断管理 (2)软中断和tasklet

    目录: <Linux中断管理> <Linux中断管理 (1)Linux中断管理机制> <Linux中断管理 (2)软中断和tasklet> <Linux中断管 ...

  2. PHP之基本操作

    PHP基础操作1.session操作 手动设置session生存期方式一: session_start(); // 设置生存时间 $lifeTime = 24*6000; setcookie(sess ...

  3. Eclipse MAT内存分析工具(Memory Analyzer Tool)

    MAT内存分析工具 MAT是Memory Analyzer的简称,它是一款功能强大的Java堆内存分析器.可以用于查找内存泄露以及查看内存消耗情况.MAT是基于Eclipse开发的,是一款免费的性能分 ...

  4. Python股票分析系列——自动获取标普500股票列表.p5

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第5部分.在本教程和接下来的几节中,我们将着手研究如何为更多公司提供大量的定价信息,以及如何一次 ...

  5. 我去年码了个表(WPF MvvM)

    又快个把月没写博客了(最近忙着学JAVA去了,都是被逼的/(ㄒoㄒ)/~~),然后用WPF码了个表,其实想加上那种提醒功能什么的,额,就这样了吧,主要是感受一下数据驱动的思想. 效果如下: 前端XAM ...

  6. RabbitMQ总结

    消息队列 三个业务场景:解耦.异步.削峰 带来问题 系统可用性降低:外部依赖越多,越容易挂掉. 系统复杂性提高:重复消费,消息丢失,消息传递的顺序性 一致性问题: 一.如何保证消息的可靠性传输(如何处 ...

  7. P1525 关押罪犯

    基础并查集-- #include<iostream> #include<string.h> #include<algorithm> #include<stdi ...

  8. HDU 3478 Catch (连通性&&二分图判断)

    链接 [https://vjudge.net/contest/281085#problem/C] 题意 一个n个点,m条边的图,开始的点是s 每次必须移动到相邻的位置,问你是否存在某个时刻所有点都可能 ...

  9. python学习第七篇——字典访问键与值

    此程序的目的在于,正确而简单的访问字典的键与值 favorite_languages={ 'jen':['python','c'], 'sarah':['c'], 'edward':['ruby',' ...

  10. Linux提示删除文件cannot remove `文件名': Operation not permitted

    Linux系统下删除某个文件时提示如下报错: 执行lsattr命令可以看到隐藏属性-------i--------,如下图: 通过查找资料发现: chattr命令用于改变文件属性.这项指令可改变存放在 ...