• 技术文章 >web前端 >前端问答

    css怎么实现带横线的箭头

    青灯夜游青灯夜游2022-04-25 18:58:20原创672

    方法:1、定义一个空元素;2、用“::before”和content插入横线,语法“元素::before{content:"——"}”;3、用“::after”和content插入箭头,语法“元素::after{content:">"}”。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css实现带横线的箭头

    实现方法:

    实现示例:

    <!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>

    1.png

    说明:::before选择器和::after选择器

    ::before 选择器向选定的元素前插入内容。

    ::after选择器向选定的元素后插入内容。

    ::before选择器和::after选择器都需要使用content 属性来指定要插入的内容。

    扩展知识:content 的使用场景

    content 的定义中就提到过是和 :before 及 :after 伪元素配合使用。:before 及 :after 是最常见的伪元素,想必大家都不陌生。

    再简单介绍下 :before 和 :after:

    下面我们看一下主要使用场景:

    插入字符

    使用 content 插入字符一般是给空元素设置默认值,类似 input 的 placeholder 属性一样,只在元素没有内容的时候展示,代码如下:

    <p>有内容的段落</p>
    <p></p>
    
    <!--:empty 是一个 CSS 选择器,当元素里面无内容的时候进行匹配-->
    p:empty::before {
      content: '空元素内容';
      color: red;
    }

    效果如下:

    3.png

    辅助元素生成

    此时核心点不在于 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;
    }

    效果如下:

    4.png

    清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为 0 的问题,代码如下:

    <div class="info-box clear">
      <div class="left">左</div>
      <div class="right">右</div>
    </div>
    
    .clear::after {
     content: '';
     display: block;
     clear: both;
    }

    上面三者缺一不可:

    通过添加元素清除浮动,触动 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) ") "
    }

    效果如下:

    5.png

    (学习视频分享:css视频教程web前端

    以上就是css怎么实现带横线的箭头的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:es6装饰器有几种 下一篇:es6解构是深拷贝吗
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3线性渐变可以实现三角形吗• css3新增伪类选择器有哪些• css3包含哪些模块• 在css3中可实现缩放效果的是什么属性• css3怎么改首字母颜色• css3新增了哪三种边框效果
    1/1

    PHP中文网