今日试了一下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. 【HTTP请求】、详解

    一.协议介绍 HTTP(HyperText Transfer Protocol,超文本传输协议)是一套计算机通过网络进行通信的规则,使HTTP客户端能够从HTTP服务器端请求到信息和服务,目前的版本号 ...

  2. SpinBlur - 旋转模糊

    [SpinBlur - 旋转模糊] Using the Spin Blur effect, you can rotate and blur the image around one or more p ...

  3. 实例: Java代码操作oracle数据库(JDBC+sevrlet+jsp+html)

    1, 注册页面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.or ...

  4. HTTP请求出现405状态码method not allowed的解决办法

    httppost请求目标网站出现405状态码, 原因为 Apache.Nginx.IIS等绝大多数web服务器,都不允许静态文件响应POST请求所以将post请求改为get请求即可

  5. 二硫化铼（ReS2）的电子输运特性及逻辑器件研究进展

    南京大学物理学院.固体微结构物理国家重点实验室.微结构科学与技术协同创新中心的缪峰教授课题组和王伯根教授课题组在新型二维材料二硫化铼(ReS2)的电子输运特性及逻辑器件研究领域取得重要进展,相关论文于 ...

  6. push和pop指令的使用

  7. Shiro和Spring 集合实现同一个账号只能一个人在线使用，其它人在使用进行剔除（八）

    1.实现原理其实就是自定义过滤器,然后登录时,A登录系统后,B也登录了,这个时候获取此账号之前的session给删除,然后将新的session放入到缓存里面去,一个账户对应一个有序的集合 编写自定义过 ...

  8. Golang之文件读写

    读写文件,不添加文件路径,默认写入到GOPATH路径下 终端读写: 源码 func Sscanf func Sscanf(str string, format string, a ...interfa ...

  9. loadrunner12--学习中遇到疑问及解释

    1.analysis里面,平均事务响应时间,平均事务响应时间+运行vuser,两个图的数据有区别是什么原因? 答: 请仔细查看以下两张图,其实两张图的数据是没有区别的. 之所以我们认为他们二者的数据有 ...

  10. 如何使用vsphere client 克隆虚拟机

    vSphere 是VMware公司推出一套服务器虚拟化解决方案. 工具/原料 vSphere 测试系统 方法/步骤 1.进入vSphere client,关闭需要克隆的虚拟机win7 2.选中ESXi ...