::before和::after

最新推荐文章于 2022-03-16 18:42:29 发布
最新推荐文章于 2022-03-16 18:42:29 发布
阅读量236 收藏
点赞数

:before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}


当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。

关键代码分析：

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;（<a href="http://www.dztcsd.com/">建筑资质代办</a>）
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。

想看这个知识点深入讲解的小伙伴请观看《css3实现图片阴影效果》中的第1-6小节。

<!DOCTYPE m.lsqifu.com/html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
  text-align:center;
  position:relative;
  top:80px;
}
.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}


.effect{
  position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
    content:"";
position:absolute; 
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
</style>
</head>
<body>
  <div class="box effect">
  <h3>Shadow Effect </h3>
</div>
</body>
</html>

大志天成119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的before和:after伪元素使用详解
09-25
在CSS中，`:before` 和 `:after` 伪元素是用于向元素的内容区添加内容的特殊工具。它们并不是真正的HTML元素，而是由CSS创建的虚拟元素，可以在元素的正常内容之前或之后插入额外的非文本内容，如图标、分隔符等。这...
CSS伪元素：after：before的特殊用法demo
06-19
伪元素实现tooltip，nav导航栏的炫酷效果以及计数器
:after/::after和:before/::before的异同
若水弹丸之地
03-15 1万+
相同点 都可以用来表示伪类对象，用来设置对象前的内容 :before和::before写法是等效的; :after和::after写法是等效的 不同点 :before/:after是Css2的写法，::before/::after是Css3的写法 :before/:after 的兼容性要比::before/::after好 ， 不过在H5开发中建议使用::before/::after...
::after后面加个空格
u012174809的专栏
03-16 597
如果是这样 .iconfont::after{ content: ' '; } 兄才，你失策了，这并没有作用，听说是被CSS渲染时吃掉了。 .iconfont::after{ content: ' '; white-space: pre; } 加个white-space:pre 搞定 ...
通过 after() 和 before() 方法添加若干新元素
dengjuanshou7445的博客
08-17 151
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。 在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before()...
css加空格的方法,css如何加空格
weixin_36341500的博客
08-04 1万+
在css中，可以利用伪元素“:before”和“:after”来在元素内容前或元素内容后添加空格，语法格式“元素:before {content: "　";}”或“元素:after {content: "　";}”。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在css中，可以利用伪元素“:before”和“:after”来在元素内容前或元素内...
::before和::after伪元素的用法
bangwencai0604的博客
07-16 57
一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content，用于在css渲染中向元素逻辑...
::before和::after是什么?
热门推荐
lb6514052的博客
02-27 2万+
本文从最简单的开始，解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1）::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。 2）::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，...
CSS3中伪元素::before和::after的用法示例
09-24
before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍了关于CSS3中伪元素::before和::after的用法...
深入理解::before/:before和::after/:after的使用
09-22
之前在网上总是可以看到::before :before ::after :after的相关文章，但是没有使用过，今天查了些资料，终于知道了他们的关系和作用。下面就做一个总结，方便有需要的朋友们可以参考借鉴，下面来一起看看吧。
微信小程序 CSS 选择器::after和::before的简单使用
03-29
前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。...
::before和::after伪元素
qq_37519640的博客
08-13 437
伪元素 伪元素不是真正的html元素，但是其用法和表现行为都与html元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。 ::before和::after 特点 伪元素不占用dom元素节点 默认为inline 使用时必须要有content属性 字符串 attr（attr_name）：伪元素的内容跟主元素的某...
CSS3高级选择器关于 :before 的问题
XXX51129的博客
09-22 1712
:before p:before在每个<p>元素的内容之前插入内容 主体示例： <body> <span> <p>星星</p> <p>月亮</p> <p>一起</p> <p>闪耀</p> </span> </body> 样式示例： bef...
CSS伪类:before 和 :after
weixin_33922672的博客
04-14 458
CSS用了许久，对一些伪类熟视无睹，从不想着去搞清楚一下。比如说这个 :before :after 其实，:before 表示该标记前面的样式，反之 :after 代表设置后面的样式。网页上常常看到有些文字前或后有小图标，用的就是这种样式： 对应的代码有： <button type="button" class="btn text" onclick="...
伪元素before的坑--空格导致的错误
lk0328的专栏
11-24 2188
今天模拟bootstrap写面包屑导航，写完后发现hover上去的时候效果不对。如图： 我的样式 bootstrap的样式，可以看到鼠标移上去以后伪元素before也会带有hover效果。 几乎照抄了bootstrap的代码，仍然是这样。看了下页面元素，二者果然不一样； 从图中可以看到两个伪元素加的位置都不一样。上网查询无果，我甚至都不知道该怎么查这个问题。 最后把bootstrap
C#读取WinCC实时和归档数据
06-21
如何在 C#应用程序中读取 WinCC 变量归档数据，资源来自西门子官网
解放鼠标右键 chrome edge 浏览器 插件
06-21
解放鼠标右键 chrome edge 浏览器 插件 开启开发者模式,拖入扩展管理即可使用
Python实战示例自动办公-20 Python文本数据可视化之“词云”图.zip
06-21
自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图
Pygments-0.11-py2.5.egg
最新发布
06-21
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
::before和::after的区别
05-02
`::before`和`::after`是CSS的伪元素选择器，它们可以用来在元素的前面或后面插入内容。 区别在于： - `::before`会在元素的内容之前插入内容，而`::after`会在元素的内容之后插入内容。 - `::before`和`::after`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值