css怎么实现带横线的箭头
时间:2022-04-26 [网络编程]作者:fabuyuan 浏览:7 次
方法:1、定义一个空元素;2、用“::before”和content插入横线,语法“元素::before{content:"——"}”;3、用“::after”和content插入箭头,语法“元素::after{content:">"}”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现带横线的箭头
实现方法:
定义一个空元素,(例如不包含内容的span标签)
使用::before选择器和content属性插入横线
使用::after选择器和content属性插入箭头
实现示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> span::before{ content: "——"; } span::after{ content: ">"; } p::before{ content: "<"; } p::after{ content: "="; } </style> </head> <body> <span></span> <p></p> </body> </html>
说明:::before选择器和::after选择器
::before 选择器向选定的元素前插入内容。
::after选择器向选定的元素后插入内容。
::before选择器和::after选择器都需要使用content 属性来指定要插入的内容。
扩展知识:content 的使用场景
content 的定义中就提到过是和 :before 及 :after 伪元素配合使用。:before 及 :after 是最常见的伪元素,想必大家都不陌生。
再简单介绍下 :before 和 :after:
- 默认 display: inline;
- 必须设置 content 属性,否则无效;
- 默认 user-select: none,即 :before 和 :after 的内容无法被用户选中;
- 不可通过 dom 使用,就是本身不存在的页面元素,HTML 源代码里,找不到它们,但从视觉上,却能看到它们的存在。
下面我们看一下主要使用场景:
插入字符
使用 content 插入字符一般是给空元素设置默认值,类似 input 的 placeholder 属性一样,只在元素没有内容的时候展示,代码如下:
<p>有内容的段落</p> <p></p> <!--:empty 是一个 CSS 选择器,当元素里面无内容的时候进行匹配--> p:empty::before { content: '空元素内容'; color: red; }
效果如下:
辅助元素生成
此时核心点不在于 content 生成的内容,而是伪元素本身。通常我们会把 content 的属性值设置为空字符串,使用其他 CSS 代码来生成辅助元素,或实现图形效果,或实现特定布局。
图形效果
使用 ::after 伪元素插入匿名替换元素,设置 content 为空,此元素没有内容,通过 CSS 样式来达到想要的图形效果。代码如下:
<div class="content-box"></div> .content-box { height: 100px; width: 200px; border-radius: 10px; position: relative; background: #fff; } .content-box::after { content: ''; position: absolute; top: 100%; right: 16px; width: 4px; height: 16px; border-width: 0; border-right: 12px solid #fff; border-radius: 0 0 32px 0; }
效果如下:
清除浮动
清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为 0 的问题,代码如下:
<div class="info-box clear"> <div class="left">左</div> <div class="right">右</div> </div> .clear::after { content: ''; display: block; clear: both; }
上面三者缺一不可:
- content: '':通过 ::after 给元素添加一个空的伪元素。
- clear: both:清除浮动,使得元素周围两边都不浮动。
- display: block:clear 只对块级元素生效。
通过添加元素清除浮动,触动 BFC,使元素的高能够自适应子盒子的高。
图片生成
直接用 url 功能符显示图片,既可以在文字前后添加图片,又可以直接替换文字。
图片直接替换文字,代码如下:
<p class="img-test">文字</p> .img-test { display: block; height: 20px; width: 20px; border-radius: 100%; content: url('../assets/test2.jpg'); }
文字前后添加图片,代码如下:
<!--方案一 --> .img-test::after { content: url('../assets/test2.jpg'); } <!--方案二 --> .img-test::after { content: ''; display: block; height: 20px; width: 20px; background: url('../assets/test2.jpg'); }
方案一中伪元素通过 content 设置图片,图片的尺寸不好控制,显示图片为原尺寸,比较模糊,一般使用方案二背景图片的方式,可以按需设置尺寸。
attr 属性值内容生成
使用 attr 获取元素属性值达到效果,一般用于获取 a 标签的连接,代码如下:
<a class="baidu-link" href="https://baidu.com"> 百度一下,你就知道!</a> .baidu-link::after { content: " (" attr(href) ") " }
效果如下:
(学习视频分享:css视频教程、web前端)
以上就是css怎么实现带横线的箭头的详细内容,更多请关注站长家园其它相关文章!
本文标签: css
转载请注明来源:css怎么实现带横线的箭头
本文永久链接地址:https://www.adminjie.com/post/11666.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- 电脑显示信号线无连接是什么意思
- app是什么应用程序的简称
- html5中onclick是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- angular与bootstrap的区别是什么
- vivov1818a是什么手机型号

- 最新文章
-
-
oracle 11g中rac怎么关闭
方法:1、用“srvctlstop/statusdatabase-dorcl”停止所有节点的实例;2、用“cd/u01/app/grid/11.2.0...
-
linux cpu是什么意思
在linux中,cpu指的是“中央处理器”,是信息处理、程序运行的最终执行单元。CPU主要的工作是处理和运算数据,所以CPU的运算速度、主频、缓存、核心数等参数...
-
oracle索引表空间怎么修改
在oracle中,可以利用alterindex语句修改索引表空间,该语句与tablespace配合使用即可修改,语法为“alterindexINDEXNA...
-
linux管理工具有哪些
linux管理工具有:1、htop,一款监控与进程管理软件;2、dstat,系统资源统计生成工具,可收集网络、硬盘、CPU等系统资源情况;3、Glances,跨...
-
oracle怎么判断是否包含字符
方法:1、利用like配合“%”,语法为“where字段like‘%字符%’;”;2、利用contains函数,语法为“contains(字段,‘字符’...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-