今日试了一下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. 史上最全的Maven Pom文件标签详解

    <span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...

  2. Timer控件的使用限制和注意事项

    Timer的Interval 属性当编写 Timer 组件时,需要考虑 Interval 属性的几点限制:1. 如果应用程序或另一个应用程序对系统需求很大(如长循环.大量的计算或驱动程序.网络或端口访 ...

  3. 按键精灵对VBS的支持

    VBSBegin…VBSEnd(VBS块)格式:VBSBegin...VBSEnd用途:可以在VBS块的区域内随意的书写VBS语法指令. 更多说明:由于彻底的转向VBS语言,会导致goto语句不能被兼 ...

  4. Oracle_in_not-in_distinct_minsu的用法

    create table a( id int, username ) ); create table b( id int, username ) ); ,'小明'); ,'小红'); ,'小君'); ...

  5. Django 1.10.2 模型数据库操作

    首先我的django 版本 >>> django.VERSION (1, 10, 2, u'final', 0) setting.py: DATABASES = { 'default ...

  6. Linux 下批量创建用户(shell 命令)

    第一种方法: 用shell批量创建用户,分为2中:1,批量创建的用户名无规律 :2.批量创建的用户名有规律首先,来说下批量创建的用户名无规律的shell:先把需要批量创建的用户名用一个文本文档列出来, ...

  7. CodeForces 518B Tanya and Postcard （题意，水题）

    题意:给定两个字符串,然后从第二个中找和第一个相同的,如果大小写相同,那么就是YAY,如果大小写不同,那就是WHOOPS.YAY要尽量多,其次WHOOPS也要尽量多. 析:这个题并不难,难在读题懂题意 ...

  8. IO多路复用原理

    (1)IO multiplexing(2)用在什么地方?多路非阻塞式IO.(3)select和poll(4)外部阻塞式,内部非阻塞式自动轮询多路阻塞式IO IO多路复用原理:其实就是整个函数对外表现为 ...

  9. swift 创建UICollectionView

    // //  CollectionViewController.swift //  tab // //  Created by su on 15/12/8. //  Copyright © 2015年 ...

  10. C++智能指针shared_ptr

    shared_ptr 这里有一个你在标准库中找不到的—引用数智能指针.大部分人都应当有过使用智能指针的经历,并且已经有很多关于引用数的文章.最重要的一个细节是引用数是如何被执行的—插入,意思是说你将引 ...