html - 如何更改此导航样式的位置？

Question

这是一组导航样式的链接:

http://tympanus.net/Development/ArrowNavigationStyles/

请向下滚动页面到最后一个样式“填充路径”。

我想更改导航箭头的位置，将每个导航箭头更多地推到容器的边缘。

在component.css文件的第924行，有这样一条规则:

.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
    position: absolute;
    left: 50%;
    width: 3px;
    height: 50%;
    background: #566475;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    outline: 1px solid transparent; /* for FF */
}

显然，我应该更改此处的“left”属性以使箭头移动。但是，当我将其更改为 80% 时，一个箭头会靠近边缘(我想要的)，而另一个则远离其边缘。应该如何编辑此规则以使两个箭头都被推近到它们的相邻边缘？

Answer 1

只需减小 .nav-fillpath 一个 css 类的宽度即可。

.nav-fillpath{
      width: 100px; /* decrease this width */
      /* other css properties */
}

为了让文本与导航图标有一定的空间，请在 .nav-fillpath h3 的两侧留出边距。

.nav-fillpath h3{
     margin: 0px 30px;  /* remove margin: 0px; */
}