今日试了一下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. 【python 】Requests 库学习笔记

    概览 实例引入 import requests response = requests.get('https://www.baidu.com/') print(type(response)) prin ...

  2. less gradient-vertical 方法的实现

    // Vertical gradient using CSS where possible, and base64-encoded SVG for IE9 (enables use of this i ...

  3. editplus 链接FTP失败，超时

    最近在用editplus链接服务器是出现了超时连接不上的情况 检查后发现FTP配置没问题 后来打开高级设置后发现没有配置端口号 配置后登陆成功

  4. 若(p,q)=1，则(p^n,q^n)=1

    [若(p,q)=1,则(p^n,q^n)=1] 因(p,q)=1,则p,q可分别表示成如下的形式: p=A^a*B^b*C^c, q=D^d*E^e*F^f 显示ABC.DEF无交集.而p^n.q^n ...

  5. 【总结整理】关于挪车和虚拟号的思考-转载v2ex

    https://www.baidu.com/link?url=A7wiF1JpOkT6Juo0nNHKcum0OiQsnRj-EZkQfjc3xB-noUeLy3HEY-4plbFmPmuJ& ...

  6. Java Thread系列（七）死锁

    Java Thread系列(七)死锁 当线程需要同时持有多个锁时,有可能产生死锁.考虑如下情形: 线程 A 当前持有互斥所锁 lock1,线程 B 当前持有互斥锁 lock2.接下来,当线程 A 仍然 ...

  7. Python中ndarray数组切片问题a[-n -x:-y]

    先看看如下代码: >>a=np.arange(10)>>a array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])>>a[-7:] array( ...

  8. .net二纬码标签打印

    在企业开发中经常用到二纬码标签,本文详细介绍.net环境下整个二纬码解决方案. 开发环境  vs2008  DevExpress8.3  ThoughtWorks.QRCode (二纬码生成组件,高版 ...

  9. serialVersionUID的作用以及IDEA、Eclipse如何自动生成serialVersionUID

    说到serialVersionUID,首先要讲讲序列化. 序列化: 序列化可以将一个java对象以二进制流的方式在网络中传输并且可以被持久化到数据库.文件系统中,反序列化则是可以把之前持久化在数据库或 ...

  10. Linux 基础教程 27-ss和ip命令

    什么是netstat     在Linux系统中输入 man netstat,显示的结果如下所示: netstat - Print network connections, routing table ...