css伪类元素:after 的多功能用法——任意大小的底边框
需求用法出现的背景:
由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板页面比较多,所以想在样式中统一修改,就用到了:after这个伪类元素;
优化前:
优化后:
代码:
优化前:
.discount_tab .tab_a.on spanr{ border-bottom:2px solid #39A1FB;}
优化后:
.discount_tab .tab_a.on span:after{ content:" "; width:1rem; height:3px; background-color: #39A1FB; margin:0 auto; display:block;}
原理:
1、如果需要用到伪类来表现样式的话,display:block这里必须写 ,因为伪类默认为行内元素;这里需要块级元素;
2、content:"";必须要写,它代表伪类的占位;
附加:三角也可以用伪类来写
底为156px,高为10px的三角形
.selector:after{
position:absolute;
content:"";
left:0;
bottom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-left:78px solid transparent;
border-left:10px solid #fff;
}
css伪类元素:after 的多功能用法——任意大小的底边框的更多相关文章
- CSS伪类对象before和after的用法
一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅 ...
- 用一个例子学习CSS的伪类元素
CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...
- CSS:CSS 伪类(Pseudo-classes)
ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...
- 细说CSS伪类和伪元素
原文 简书原文:https://www.jianshu.com/p/eae56b7fe7fe 大纲 1.伪元素 2.伪类元素 3.伪元素和伪类元素的区别 4.伪类和伪元素的使用 1.伪元素 伪元素在D ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- 谈谈css伪类与伪元素
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...
随机推荐
- bootstrap设计进度条和圆点
1.设计进度条.文字前面的圆点和图片 2.思路: (1)设计进度条 (a) 进度条有滚动效果,要加上类.active (b)进度条的颜色通过类.progress-bar-success来写,可以写成. ...
- Python基础——安装运行
Python是如何运行的? 像绝大多数编程语言一样,要在计算机上能够运行python程序,至少需要安装一个最小的Python包:一个Python解释器和支持的库. 安装Python 安装包下载:htt ...
- C语言库函数实现 【微软面试100题 第八十三题】
题目要求 1.strcpy/memcpy/memmove: 2.memset函数: 3.字符串处理函数. 题目分析 1.接口定义: char * strcpy(char * dest, const c ...
- Android保持屏幕常亮唤醒状态
第一步: 首先添加权限: <uses-permission android:name="android.permission.WAKE_LOCK"></uses ...
- h5布局之道(最终篇)
大家好,时隔一年多了,前几篇探讨的rem布局后来又有改进不过一直没有想起来更新博客,rem布局淘宝用的也比较早,有兴趣的可以看看淘宝的flexible ,我的用法比较简单,原来一样,废话不说了直接上代 ...
- JMeter学习笔记(五) 文件上传接口测试
此次测试的是上传图片接口,我把测试情况整理了一下,其他的上传文件接口都类似. 1.我通过jmeter的录制功能获取到了接口地址以及相关参数,如果有接口文档就会方便很多,此步骤就不多做说明了 2.因为上 ...
- 1、python 循环控制
案例1: lucky_num = 19 input_num = int(input("Input the guess number:")) if input_num == luc ...
- sources-x.list
deb http://debian.ustc.edu.cn/ubuntu/ xenial main multiverse restricted universe deb http://debian.u ...
- Go的HttpClient实现
Go作为相对java更新的语言,本身的http模块就有客户端请求的实现,继上一章Java的实现,这里记录Go的实现,接下来还有python的实现 注(go版本1.6) package main imp ...
- 软工实践Alpha冲刺(5/10)
队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 已经解决登录注册等基本功能的界面. 完成了主界面的基本布局 ...