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等. ...
随机推荐
- 03019_过滤器Filter
1.Filter的简介 (1)Filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理: (2)快速入门步骤 ①编写一个过滤器的类实现Filter接 ...
- javascript实现在textarea光标位置插入文字并移动光标到文字末尾
1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...
- oracle 用户被锁定解锁方法
修改了用户密码,第二天过来发现用户被锁定,晚上走的时候还好好的 . alter profile DEFAULT limit FAILED_LOGIN_ATTEMPTS UNLIMITED; alter ...
- CSS UNIT 详解以及最佳实践
分类 ■ 绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方 ...
- Monkey、Monkeyrunner之间的区别
Monkey.Monkeyrunner之间的区别 一.Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输 ...
- Entity Framework(一)
相关知识点复习: 1.var 类型推断: var p=new Person(); 2.匿名类型: var a=new {Name="wang",Age=12 }; 3.给新创建的 ...
- (原)Unreal源码搬山-动画篇 自定义动画节点(一)
@author:黑袍小道 太忙了,来更新下,嘿嘿 前言: 本文是接着上文 Unreal搬山之动画模块_Unreal动画流程和框架,进行简单入门如何自定义动画图标的AnimNode. 正文: 一.Ani ...
- leetcode 214. 最短回文串 解题报告
给定一个字符串 s,你可以通过在字符串前面添加字符将其转换为回文串.找到并返回可以用这种方式转换的最短回文串. 示例 1: 输入: "aacecaaa" 输出: "aaa ...
- Statement [倍增+线段树]
题面 思路 首先,可以确定的是,本题因为每个点只有一条入边,所以整个图肯定是一个基环外向树森林 那么我们首先考虑树上的情况: 我们考虑一个真点,它会对它的子树里面的所有假点产生贡献 一个真点对一个假点 ...
- 接水果(fruit)
接水果(fruit) 风见幽香非常喜欢玩一个叫做 osu! 的游戏,其中她最喜欢玩的模式就是接水果.由于她已经 DT FC 了 The big black,她觉得这个游戏太简单了,于是发明了一个更加难 ...