css位元素 after

要结合content使用,没有content是不起任何作用的.(可以定义content为空)

eg:

content中内容可以为字符串,一张图片(content:url(a.jpg)),也可以为一个属性

.box:after{

　　content:"杜小雨";

　　color:red;

}

结果为:杜小雨萌萌哒.

.box:before{

　　content:attr(id);

}

结果为:aaa萌萌哒

插入的元素默认为行内元素,但可以通过display改变

eg:

.box:after{

　　content:"";

　　width:100px;

　　height:100px;

　　border:1px solid #faa;

　　display:block;

}

用来清除浮动

eg:

在父元素上添加.clearfix

.clearfix:after {
　　display: block;
　　clear: both;
　　content: "";
}

for ie 6/7(trigger hasLayout)

.clearfix{

　　zoom:1;

}

转载于:https://www.cnblogs.com/ameiaidaima/p/5728348.html

css位元素 after相关推荐

css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
CSS的元素显示模式（块内元素和行内元素）
CSS的元素显示模式:块内元素和行内元素. 块内元素:<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li& ...
html 相对于父标签位置,css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
CSS实现元素居中原理解析
原文:CSS实现元素居中原理解析在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简 ...
实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 除了display.visibility.opacity三个属性可以隐藏元素之外,是否还存 ...
用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

css位元素 after

css位元素 after相关推荐

最新文章

热门文章