::before和::after伪元素的使用及优惠券案例

伪元素介绍

E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::before {content:"开始";
}
div::after {content:"结束";
}

":" 与 “::” 区别在于区分伪类和伪元素，E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。

常用用途

用于添加图标字体，即iconfont。
伪元素清除浮动。

.clearfix:before,.clearfix:after { content:"";display:table; height: 0; // 须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}

优惠券案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>优惠券</title><style>* {margin: 0;padding: 0;}.coupon-box {width: 260px;height: 150px;background: #e92322;margin: 100px auto;font-size: 16px;}.coupon-left {overflow: hidden;}.coupon-right {float: right;width: 60px;height: 150px;text-align: center;position: relative;border-left: 1px dashed #fff;}/*两个凹进去的圆*/.coupon-right::before,.coupon-right::after{content: '';position: absolute;width: 12px;height: 12px;border-radius: 50%;background: #fff;left: -6px;}.coupon-right::after{bottom: -6px;box-shadow: 0 2px 3px #d8d8d8 inset;}.coupon-right::before{top: -6px;box-shadow: 0 -2px 3px #d8d8d8 inset;}.coupon-right div {width: 20px;color: #fff;font-size: 20px;margin-left: 20px;margin-top: 20px;}</style>
</head>
<body>
<div class="coupon-box"><div class="coupon-right"><div>立即领取</div></div><div class="coupon-left"><div><h3>优惠券内容</h3></div></div>
</div>
</body>
</html>

效果图：

::before和::after伪元素的使用及优惠券案例相关推荐

css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
cssbefore图片大小_两小时学会CSS-before after 伪元素
什么是伪元素? 不会出现在DOM中,不会改变文档内容,仅仅是在CSS渲染时加入,不可复制的元素. 常用伪元素: ::first-letter, ::first-line,::before,::afte ...
css3伪元素选择器before 和 after 的使用
:before 的作用, 在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容,但是通常为空字符串. :after 的作用, 在子元素的最 ...
css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
基础知识--:before伪元素和:after伪元素
http://book.51cto.com/art/201108/285688.htm 3.7 替换指定位置大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

::before和::after伪元素的使用及优惠券案例

伪元素介绍

常用用途

优惠券案例

::before和::after伪元素的使用及优惠券案例相关推荐

最新文章

热门文章