今日试了一下button添加伪类元素，结果是不行的前后都叠加在一起

html代码：

<button class="form_btn" formType="submit">开始择日</button>

css样式：

.form_btn::before{ content: ""; position: absolute; top:0; background:yellow; width:14px; height: 38px; background-size: 100%; left: 0;}

.form_btn::after{ content: ""; position: absolute; top: 0; right: 0;  background: #000; width: 20px; height: 38px;}

把button换成view就没问题

button不能添加伪类元素的更多相关文章

  1. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  2. 关于伪类元素:before和:after

    关于伪类元素:before和:after   CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标 ...

  3. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  4. css伪类元素：after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...

  5. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  6. 使用button的:after伪类选择器内容的跳动

    按钮的css样式,想要作个美观一点的按钮,使用:after伪类选择器在按钮后跟随"!!"的符号,但点击按钮时按钮的值内容动,但跟随的"!!"符合不动,这样看起来 ...

  7. 伪类元素before&after

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

    HTML部分 <div class="zhihu"> <div class="loginMain"> </div> < ...

  9. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

随机推荐

  1. openAL在mac下播放音源结束时判断处理

    音频播放完毕,自然停止 alGetSourcei(source[0], AL_BUFFERS_QUEUED, &state);    NSLog(@"queued number:%d ...

  2. http://www.5xcg.com/bbs/forum.php?mod=viewthread&tid=51143&extra=page%3D1

    http://www.5xcg.com/bbs/forum.php?mod=viewthread&tid=51143&extra=page%3D1 因为身在酒店设备有限,只能尽量把文字 ...

  3. 解决opencv3运行opencv2代码时报错的修改备忘录

    虽然opencv3是基于opencv2进行开发的(一部分opencv2代码在opencv3中还能正常运行),但opencv3自身也做了部分修改,而目前网上很多教程还是基于opencv2的函数API来编 ...

  4. 迷你MVVM框架 avalonjs 1.2.5发布

    avalon1.2.5发布,升级ms-widget,整合avalon.require.text到核心,并且修复了avalon.mobile的avalon.innerHTML方法的BUG,让它能执行脚本 ...

  5. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  6. SSD

    https://blog.csdn.net/WZZ18191171661/article/details/79444217 论文题目:SSD: Single Shot MultiBox Detecto ...

  7. 【poj2411】Mondriaan's Dream 状态压缩dp

    AC传送门:http://vjudge.net/problem/POJ-2411 [题目大意] 有一个W行H列的广场,需要用1*2小砖铺盖,小砖之间互相不能重叠,问有多少种不同的铺法? [题解] 对于 ...

  8. iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone ...

  9. learning.py报错

    在廖雪峰大神的网站下学习了Python,其中有一个提供互动环境的Python脚本--learning.py,报了个错,看了下源文件的代码,安排了一下. 报错信息: This learning.py i ...

  10. C#通用数据访问类库

    说明:此篇文章是给那些和我一样仍在使用ADO.NET访问数据库的.NET开发人员写的,因为某些原因,比如还在使用.NET3.0以下版本开发.NET应用或者所使用的数据库对ORM支持不是很好,或者是对O ...