:after和:before
来源:互联网 发布:亳州网站关键词优化 编辑:程序博客网 时间:2024/06/09 22:59
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> button{ width:100px; border:1px solid black; border-radius:5px; position:relative; } button:before{ content:attr(data-tip); opacity:0; position:absolute; top:200%; left:5%; background:#ffcb66; padding:5px 15px; white-space: nowrap; border-radius:10px; transition:all 0.4s ease; color:black; } button:after{ content:''; width:0; height:0; /* border-bottom: 10px solid #ffcb66; border-left: 10px solid transparent; border-right: 10px solid transparent; */ border:8px solid transparent; border-bottom:8px solid #ffcb66; position:absolute; top:150%; left:50%; transition:all 0.4s ease; opacity:0; } button:hover:after{ top:105%; } button:hover:before{ top:180%; } button:hover:after, button:hover:before{ opacity:1; } p:after{ content:''; display:inline-block; border:8px solid transparent; border-bottom:8px solid red; } div{ width:100px; height:80px; border:2px solid black; position:relative; } div:after{ content:''; position:absolute; border:12px solid transparent; border-left:12px solid #fff; top:34%; left:100% } div:before{ content:''; position:absolute; border:15px solid transparent; border-left:15px solid black; top:30%; left:100% } </style></head><body> <button type="" value="确定" data-tip="这是一个提示"> 确定 </button> <p>这是一个三角形</p> <div> </div></body></html>
阅读全文
0 0
- :after/::after和:before/::before的区别
- :before/:after和::before/::after的区别
- ::after和::before
- ::before和::after
- 【CSS3】::before和::after
- CSS :before 和 :after
- :before和:after
- ::before和::after
- html---after和before
- :before和 :after
- CSS ::before 和 ::after
- before和after注意事项
- :after和:before用法
- 巧用::after和::before
- before和:after
- :after和:before
- Date的after和before
- 伪元素:after和:before
- CentOS 7 搭建ngrok服务器(外网映射内网)
- PGIS门户勾选树形菜单查询不到结果
- Weblogic和apache实现负载均衡
- windows下一些启动服务的命令
- MyEclispe+CVS配置
- :after和:before
- 预习进程进通信方式2
- Tomcat5与Tomcat6的EL冲突,JSTL的…
- eclipse/myeclipse中设置自动提示…
- 怎么让Windows 7支持多用户操作
- javascript选中事件
- GIS常用的几何算法
- Java使用protobuf入门四步骤
- oracle创建触发器实现字符串ID自增…