需求用法出现的背景:

由于项目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 的多功能用法——任意大小的底边框的更多相关文章

  1. CSS伪类对象before和after的用法

    一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅 ...

  2. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  3. CSS:CSS 伪类(Pseudo-classes)

    ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...

  4. 细说CSS伪类和伪元素

    原文 简书原文:https://www.jianshu.com/p/eae56b7fe7fe 大纲 1.伪元素 2.伪类元素 3.伪元素和伪类元素的区别 4.伪类和伪元素的使用 1.伪元素 伪元素在D ...

  5. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  6. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  7. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  8. css伪类 伪元素

    之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...

  9. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

随机推荐

  1. 03019_过滤器Filter

    1.Filter的简介 (1)Filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理: (2)快速入门步骤 ①编写一个过滤器的类实现Filter接 ...

  2. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  3. oracle 用户被锁定解锁方法

    修改了用户密码,第二天过来发现用户被锁定,晚上走的时候还好好的 . alter profile DEFAULT limit FAILED_LOGIN_ATTEMPTS UNLIMITED; alter ...

  4. CSS UNIT 详解以及最佳实践

    分类 ■    绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方 ...

  5. Monkey、Monkeyrunner之间的区别

    Monkey.Monkeyrunner之间的区别 一.Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输 ...

  6. Entity Framework(一)

    相关知识点复习: 1.var 类型推断: var p=new Person(); 2.匿名类型: var a=new {Name="wang",Age=12  }; 3.给新创建的 ...

  7. (原)Unreal源码搬山-动画篇 自定义动画节点(一)

    @author:黑袍小道 太忙了,来更新下,嘿嘿 前言: 本文是接着上文 Unreal搬山之动画模块_Unreal动画流程和框架,进行简单入门如何自定义动画图标的AnimNode. 正文: 一.Ani ...

  8. leetcode 214. 最短回文串 解题报告

    给定一个字符串 s,你可以通过在字符串前面添加字符将其转换为回文串.找到并返回可以用这种方式转换的最短回文串. 示例 1: 输入: "aacecaaa" 输出: "aaa ...

  9. Statement [倍增+线段树]

    题面 思路 首先,可以确定的是,本题因为每个点只有一条入边,所以整个图肯定是一个基环外向树森林 那么我们首先考虑树上的情况: 我们考虑一个真点,它会对它的子树里面的所有假点产生贡献 一个真点对一个假点 ...

  10. 接水果(fruit)

    接水果(fruit) 风见幽香非常喜欢玩一个叫做 osu! 的游戏,其中她最喜欢玩的模式就是接水果.由于她已经 DT FC 了 The big black,她觉得这个游戏太简单了,于是发明了一个更加难 ...