html实现右箭头

　

右箭头符号

荆轲刺秦王

在制作网页的时候,我们可能会有这样的需求:比如

我们需要做一个小箭头,最简单的办法就是直接用数学符号:">",但是这样做的缺点就是没有办法调节符号的大小,颜色......这就非常不理想.我在网上找到了一篇博客,专门解决了这个问题:

原文链接:https://blog.csdn.net/Che_rish/article/details/78871662

原文是在做手机端网页时候右箭头的解决方案,如果想要换成PC端的网页效果,需要做一点小小的改动:

1.我首先在每个li里面都有一个a标签:

<li><a href="">园区新闻<span class="right-arrow"></span></a></li>

可以看到,我直接加了一个<span>

2.重点看我css样式:

/*右箭头*/
    .right-arrow {  
                 display :inline-block;
                 position: relative;
                 width: 28px;
                 height: 28px;
                 margin-right: 20px;
                 }
    .right-arrow::after {
          display: inline-block;
          content: " ";
          height: 13px;
          width: 13px;
          border-width: 3px 3px 0 0;
          border-color: #0177ff;
          border-style: solid;
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          position: absolute;
          top: 50%;
          left: 150px;
         }

我把颜色,大小,位置做了一点改变,具体实现可以根据项目需求来改进.

博主还做了上下箭头和三角箭头,我这里没有用到,所以就不再多加累述.

相关阅读

HTML简单标记语言

一， HTML文字标记 普通文字，页面上正常显示 字体标记： <i> </i>定义斜体文本 <strong></strong>文本加粗 小写上标 <su

BP神经网络C语言实现

BP神经网络C语言实现 山人 BP神经网络应用广泛，大概是今年的五月份左右，我需要做一个多元函数的拟合，所以写了这个BP神经网络。为什

JavaScript中textContent、innerText和innerHTML的用

目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 2.innerText的用法 1.设置标签中的文本内

strtok的实现与原理

  该函数包含在"string.h"头文件中 函数原型：char* strtok (char* str,constchar* delimiters );函数功能：   切割字符串，将str

Spring通过SchedulerFactoryBean实现调度任务的配置

真是越来越懒了，半年前配置过这个东西现在又忘了。找了原来的代码看了下，现在有必要将这个东西记录下来。直接上配置：<?xml version=