css中的before与after

before与after是css中的两个伪元素。所谓的伪元素就是一个虚假的元素，并插入到目标元素内容的之前与之后，我们一般可以通过css来控制它。其实before与after的编码是非常的简单的，就像我们在css中对他进行操作，比如设置他的背景颜色、设置它的大小、设置他的定位等等。只不过伪元素多加了一个content属性，如果我们对他不进行设置，那么我们设置的伪元素就会不起作用，我们可以设置content的内容为一个空字符串

content当我们添加的content为字符串的时候，字符串作为伪元素的内容添加到主元素中，这个字符串是直接原样输出内容，里面即使有html的转义符，也不会被转译。

#css代码
.a {width: 100px;height: 100px;margin-left: 20px;background-color: #eee;
}
.a::before {content: "♥";color: red;
}
.a::after {content: "♥";color: blue;
}

/*html代码*/
<div class="a">
"hello"
</div>

从上面我们可以知道before与after是一个行内元素，我们可以添加属性display：block；来进行转换为块级元素。

css中的before与after相关推荐

css中float用法
文档流:浏览器根据元素在html文档中出现的顺序,从左向右,从上到下依次排列. 浮动属性是CSS中的定位属性,用法如下: float: 浮动方向(left.right.no ...
关于css中float的一切
原文:http://css-tricks.com/all-about-floats/ 这篇文章说的简单易懂 float是CSS中关于定位的属性. float有4个值:none, left, righ ...
html如何给文字添加阴影效果,css中怎么给字体添加阴影效果
css中可以使用text-shadow属性给字体添加阴影效果,text-shadow是CSS样式属性单词,是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式. text-shadow属性的语法 ...
css中绝对定位中的left和top属性
<html><head><title>Absolute Position</title><style type = "text/css& ...
css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
在CSS中定义a:link、a:visited、a:hover、a:active顺序
摘自:http://www.qianyunlai.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很 ...
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...

css中的before与after

css中的before与after相关推荐

最新文章

热门文章