关于before/after.

关于before/after.

http://img1.sycdn.imooc.com/climg//594bbf7c0001813805480211.jpg

到这一步的时候,div::after为什么会在div外面。不应该在div里面的最后面吗?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

你好,注释掉行高后,使用伪类添加的2个圆圈是不会重合的,因为它们都设置过display:block;是要换行显示的。你检查一下代码,是不是哪有马虎写错了呢。还有:after定义的就是元素内容的后面添加新内容,即使写在了before的前面,渲染页面的时候也要出现在后面。overflow:hidden是将元素中的超出内容隐藏,因为div定义了圆角和行高,after和before的内容都暴露在了元素外部了,所以都被隐藏了。

怎么都被占用了呢 2017-06-23 10:31:08

因为div中文字设置了line-height(行高),添加到后面的内容就被挤下去了,你可以将定义行高的代码注释掉,试一下哦。

  • 恩恩。把行高注释掉以后,发现两个圆圈有重叠部分,对两个圆圈设置背景色之后,发现after块级元素在before块级元素上面,为什么?如果是按代码顺序的话,我是先写了after部分的代码后写的before。。
    2017-06-23 12:17:27
  • 还有,设置行高后,after被挤出了div外面,那能不能用overflow:hidden清除掉after?设置overflow:hidden以后发现before和after都消失了,但是before是在div内部没有溢出啊,为什么还会被清除呢。?
    2017-06-23 12:20:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师