CSS使用伪类控制边框长度
前言:
如图: 我们需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便。
这里使用的是微信小程序编写的, 所以标签会是view
,和html不冲突
html:
<view class="swiper-tab"><view class="swiper-tab-item {{currentTab=='1'?'active':''}}" data-current="1" bindtap="clickTab">安全帽监控</view><view class="swiper-tab-item {{currentTab=='2'?'active':''}}" data-current="2" bindtap="clickTab">危险区域监控</view></view>
css:
.swiper-tab {width: 100%;font-family: PingFangSC-Medium;font-size: 28rpx;border-bottom: 2rpx solid #F1F1F1;text-align: center;height: 88rpx;line-height: 88rpx;display: flex;flex-flow: row;justify-content: space-between;background: #ffffff
}.swiper-tab-item {width: 50%;color: #252627
}.active {color: #4876F9;font-weight: bold;position: relative;
}
上面都是页面的基础样式, 想要实现边框的长度控制, 就需要使用:after
伪类css:
.active:after {content: '';position: absolute;bottom: 0;height: 6rpx;width: 100rpx;background-color: #4876F9;left: 50%;transform: translateX(-50%);
}
最后两句是控制边框居中的问题。
CSS使用伪类控制边框长度相关推荐
- html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
- CSS :active 伪类
:active -- CSS :active 伪类,适用于一个元素被激活时的样式 语法: :active CSS版本:CSS1 引用网址:http://www.dreamdu.com/css/pseu ...
- [css] CSS的伪类和伪对象有什么不同?
[css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...
- CSS:hover伪类使用
CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...
- html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
- html css链接伪类大全,什么是css链接伪类?
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
- CSS :has伪类
CSS :has伪类 1 概述 2 实例说明 2.1 表单元素前面加* 2.2 拖拽列表 2.3 多层级hover 2.4 评星组件 3 兼容性 1 概述 :has()表示满足一定条件后,就会匹配该元 ...
- 使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- Css 结构伪类选择器
目录 Css 结构伪类选择器 结构伪类-公式 Css 结构伪类选择器 在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
最新文章
- 面试官:小伙汁,你画的SpringMVC请求处理过程是从网上抄的吧?
- WEB 测试点总结
- 2017暑假 第四周 学习总结(复习)
- C++ Primer 5th笔记(chap 16 模板和泛型编程)可变参数模板举例
- 图说二叉树添加数据原理以及遍历原理
- Mime类型与文件后缀对照表及探测文件MIME的方法
- 【PAT甲级 大数运算】1065 A+B and C (64bit) (20 分) Python 全部AC
- React with Webpack -1: 介绍Helloworld
- 【小点点】上架了他们的官方Windows 8应用
- centos7.2 使用rpm安装jdk8
- Pytorch中RNN输出的h_n和output是什么
- postman传各种类型的数组格式
- C语言实现推箱子game
- JDK API 中英文版 在线版、下载地址
- 2023计算机毕业设计SSM最新选题之javaEE的仓库管理系统93c6b
- Python黑帽子-实现netcat基本功能(改进版)
- ChinaSoft 论坛巡礼 | CCF-华为胡杨林基金-软件工程专项论坛
- seqkit根据基因id_基因家族分析保姆级教程(分子进化)-生信小白自学之路
- base64编码图片数据存储服务器
- 对比学习Contrastive Learning
热门文章
- python tk教程_【转】【Python】Tkinter教程
- 大学生国家安全教育答案---【快捷查询】
- 高校学籍档案管理系统 - 大学生学籍档案查询系统
- 教你用Axure RP 9 设计手机APP
- 抓取网页上的图片(一)
- spring boot 快速入门 vod(视频点播)(使用vod之前建议先看我的oss上传服务)
- Android问题集锦之三十八 not allowed to send broadcast android intent
- excel创建表格并且智能筛选表格中的所有数据
- 02进度控件-01水波进度条-progresswater
- 【PyCharm】python2.7 3.7遇到的bug