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. Android自动化测试学习路线

    最近在整理Android自动化测试的相关资料,大体上把一些知识点梳理了,这里做一个简单的分享! Android里面测试相关的工具和框架太多了.你应该从以下几个方面入手. 编程语言的选择 如果你要学习的 ...

  2. 不可变对象和Biulder模式(面试问题)

    String就是一个典型的不可变对象.外界的操作不能改变它,如果尝试改变都会返回一个新的String对象. 具体实现起来就是把属性全部变成private 和 final的,这个类也是final的不可继 ...

  3. 【转】【强化学习】Deep Q Network(DQN)算法详解

    原文地址:https://blog.csdn.net/qq_30615903/article/details/80744083 DQN(Deep Q-Learning)是将深度学习deeplearni ...

  4. vue-amap 实例获取与自动缩放

    this.$refs.map.$amap.setFitView(markers) 获取实例,$amap 为 el-map 的 vid,没错,vid 获取方式就是这样 markers 为 Amap.Ma ...

  5. 朱晔和你聊Spring系列S1E8:凑活着用的Spring Cloud(含一个实际业务贯穿所有组件的完整例子)

    本文会以一个简单而完整的业务来阐述Spring Cloud Finchley.RELEASE版本常用组件的使用.如下图所示,本文会覆盖的组件有: Spring Cloud Netflix Zuul网关 ...

  6. 十二、存token获取token刷新token发送header头

    //测试token //获取token function setToken(data){ var storage = window.localStorage; if(!storage){ alert( ...

  7. c++继承实例

    #include <iostream> #include <vector> #include <string> using namespace std; class ...

  8. 美团面试(c++方向)

    美团后台基本都是java,c++很少的 一面:(其实问了很多,但是很多不记得了) 1.    mfc里边的句柄, Qt里边的信号和槽函数 2.    c 程序的内存分布 3.    堆和栈的区别 4. ...

  9. H5 65-清除浮动方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. p9半幺群

    如何不理解划红线的地方?第二个划红线地方,请举一个例子 1.0不是幺元 2.f(1)=2, f(2)=1, f(3)=3, g(1)=2, g(2)=3, g(3)=1  fg不等于gf