overflow属性对before、after伪元素的影响

div中有before伪元素,如图:



当该div内容增多时,添加了纵向滚动条的样式,如下:

max-height:300px;
overflow: auto;

随后伪元素就消失了,如图,小箭头不见了。


overflow的说明:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow


before的说明:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/%3A%3Abefore


::before 会为当前元素创建一个子元素作为伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。

因为scroll使得ul的内容被裁剪了,于是作为子元素的before和after,也就被裁剪了。
before, after 伪元素相当于子元素,overflow 不为visible 时子元素当然显示不出来。

 

解决方案:

在该div上内嵌了一个div,在此内嵌的div上添加overflow及width height元素 

max-height:300px;
width: 100%;
height: 100%
overflow: auto;
 


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/40743.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何提升对编程的兴趣,在编程中找到快乐?

上周有同学和我交流,问我怎么能在编程中找到快乐,提升编程的兴趣。 今天正好又是周末,对于这个问题,小编就要祭出大招了。 首先,打开浏览器,访问一个神奇的地址: https://github.com/ 。 对的…

一个会对对联的AI项目

编辑文章 声明:本文首发微信公众号【菜鸟要飞】,如有转载,请标明出处! 快过年了,贴对联是必不可少的传统风俗。不知道各位读者有没有自己写过对联呢?写对联可不是一件简单的事情,如果不是满腹…

字符串匹配算法知多少?

文章目录 BF算法RK算法编辑器中的全局替换方法:BM算法坏字符好后缀规则代码实现 KMP算法 一说到字符串匹配算法,不知道会有多少小伙伴不由自主的想起那个kmp算法呢? 想到是很正常的,谁让它那么优秀呢。 BF算法 不要被事物的表面…

量化股票查询代码是什么?

量化股票查询代码是什么?接下来用一些代码来分析一下,如下: 做空95:HHV((HIGHLOWOPEN2*CLOSE)/5H-L,5),COLORBLUE;做空68: HHV((HIGH-LOWOPEN2*CLOSE)/5*2-L,5),COLORRED; 平衡点:LLV((HIGHLOWOPEN2*CLOSE…

voipdiscount免费拨打全球电话(无需手机注册)

我测试过了的,能给我手机打通,我也给无题打了的感觉还不错。现推荐给大家! voipdiscount免费拨打全球电话(无需手机注册)通话效果极好到www.voipdiscount.com下载一个软件voipdiscount,申请一个用户(不需手…

企业使用虚拟码号的优势!

其实用不用隐私码号,或者怎么用隐私码号,是和企业的基本业务场景有关的。我们在这将近5年的服务过程中,遇上的行业千差万别,需求也是完全不同。如果非要总结一些优势的话,那么简单的做个应用场景分类。 隐私码号&#…

VOS网络电话如何注册IMS

IMS注册需要IMS方提供账号的注册信息 比如 用户名称:862584372919 认证密码:123456 服务器地址:ims.jx.chinamobile.com 认证用户:862584372919 SIP代理:172.16.5.144 第一步: 在vos的业务管理—>注册管理中按下图…

趣图:程序员假发攻略

(给程序员的那些事加星标,每天看趣图) 15 号字 ↓↓↓ (漫画原作者:tango2010 投稿:遇见) 往期趣图(点击下方图片可跳转阅读) 关注「程序员的那些事」加星标,不错过趣图 &#xff0…

老大“秃”伤悲的年轻人,正靠假发维持最后的体面

本文转载自虎嗅网 如今90后的潮流,已经逐渐让人看不懂了。 现在见面第一句话都不是“今天你基金绿了吗?”“今天你cp发糖了吗?”,而是: “你今天戴的是假发吗?” 随着越来越多的90后涌入脱发大军&#…

计算机毕业设计php假发销售商城网站(源码+系统+mysql数据库+Lw文档)

项目介绍 假发销售网站使用php,mysql实现了如用户注册、用户登录、假发商品的预览查询、对假发商品的购买通过购物车实现、可进入留言本留言等等,从而实现了网站与客户之间的交流和沟通。 功能:客户功能和管理员功能两个部分。 设计题目:假…

c语言链表假发管理系统,C语言链表关键字检索

满意答案 a_xman 2014.09.20 采纳率:58% 等级:9 已帮助:1813人 /**************************** 包括头文件 *****************************/ #include #include /***************************** 函数声明 *****************************…

ios图形之矩阵操作

1 - (void)drawRect:(CGRect)rect2 {3 // 画四边形4 CGContextRef ctx UIGraphicsGetCurrentContext();5 6 // 保存上下文7 CGContextSaveGState(ctx);8 9 // 注意:设置矩阵操作必须在添加绘图信息之前 10 CGContextRotateCTM(ctx, M_PI_4); …

深度:数据解读百亿规模中老年假发市场发展趋势 国内外假发上市公司发展经验

在对中老年群体消费需求与消费心理进行持续深入研究过程中,AgeClub发现对脱发问题严重的中老年人来说,假发是最好的改变外表形象的选择,拥有巨大市场需求和发展潜力。 据中国健康促进与教育协会2016年公布的“中国脱发人群调查”&#xff0c…

怎么在php文件插入背景图片,怎么给视频文件添加背景图片?将视频放在图片上面播放...

都说“清明时节雨纷纷”,明天就是清明节了,小编抬头望望天空可真是没有一丝丝要下雨的节奏啊。清明节放假,大家有么有计划回家呢~反正小编是没计划的,小编的妈妈告诉小编说“你别回来除人……”,除人在小编家乡那边的意…

服务器图片加载慢_张云雷开工拍杂志,昕薇服务器一定优化好别崩,手机被卡已三回...

美好的九月第一天,也是周末,张云雷发微博,今天你们开学我开工,还没下班转场中,辫儿哥哥有才华呀,说话都一套一套的押韵。 他说摩羯座太难了,难不难不知道,就看出摩羯座的张云雷颜值要…

二元函数图像生成器_谷歌程序员自制秃头生成器:一键get张东升同款发型,今天你脱发了吗?...

文章来源于微信公众号:机器之心 作者 |Synced 原文链接:请点击 文章仅用于学习交流,如有侵权请联系删除 头可断,发型不能乱。 最近有一个男人的名字实在太火了,他叫「张东升」;比他本人更出名的&#xff0c…

时标网络图

认识时标网络图 时标网络图可解决的问题 一、 直接看关键路径、自由时差和总时差 自由时差:不影响任何紧后活动最早开始时间下本活动可推迟时间 总时差关键路径时长-活动所在最长路径 二、资源平滑-移动活动,通过浮动时间优化资源需求【重要】 三、计算…

假发重回颜值赛道,假发经济起风?

配图来自Canva可画 年轻人的爱美是从头到脚的精致装扮,谁能忍受自己拥有张东升同款秃头?即使是一丝一毫的发际线上移都会让人愤懑不已。看过张东升戴假发前后的样子,大家不得不相信头发对颜值的重要性。而一众明星又带火了挂耳染、漫画刘海等…

基于PHP假发销售商城网站

假发销售网站使用php,mysql实现了如用户注册、用户登录、假发商品的预览查询、对假发商品的购买通过购物车实现、可进入留言本留言等等,从而实现了网站与客户之间的交流和沟通。 功能:客户功能和管理员功能两个部分。 设计题目:假发销售网站…

多图 | Java 程序员必备的一些流程图

1.spring的生命周期2.TCP三次握手,四次挥手3.线程池执行流程图4.JVM内存结构5.Java内存模型6.springMVC执行流程图7.JDBC执行流程8.spring cloud组件架构9.dubbo 调用 整理了一些Java基础流程图/架构图,做一下笔记,大家一起学习。 1.spring的…