本篇内容主要讲解“css如何实现带横线的箭头”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css如何实现带横线的箭头”吧!
专注于为中小企业提供成都做网站、成都网站设计、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业龙子湖免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
方法：1、定义一个空元素；2、用“::before”和content插入横线，语法“元素::before{content:"——"}”；3、用“::after”和content插入箭头，语法“元素::after{content:">"}”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现带横线的箭头
实现方法：
实现示例：
Document
说明：::before选择器和::after选择器
::before 选择器向选定的元素前插入内容。
::after选择器向选定的元素后插入内容。
::before选择器和::after选择器都需要使用content 属性来指定要插入的内容。
扩展知识：content 的使用场景
content 的定义中就提到过是和 :before 及 :after 伪元素配合使用。:before 及 :after 是最常见的伪元素，想必大家都不陌生。
再简单介绍下 :before 和 :after：
下面我们看一下主要使用场景：
插入字符
使用 content 插入字符一般是给空元素设置默认值，类似 input 的 placeholder 属性一样，只在元素没有内容的时候展示，代码如下：
有内容的段落
p:empty::before {
content: '空元素内容';
color: red;
}
效果如下：
辅助元素生成
此时核心点不在于 content 生成的内容，而是伪元素本身。通常我们会把 content
的属性值设置为空字符串，使用其他 CSS 代码来生成辅助元素，或实现图形效果，或实现特定布局。
使用 ::after 伪元素插入匿名替换元素，设置 content 为空，此元素没有内容，通过 CSS 样式来达到想要的图形效果。代码如下：
.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;
}
