（CSS）链接<=

Question

我想创建具有此形式的HTML链接：

• 时链路悬停或聚焦该形式应当改变其颜色。
• 链接中的文本应位于链接的中心，通常意味着display: block。
• 这不会有问题，使用相同的方式创建一个链接在同一行中的另一个方向。 （I有问题与此，当我使用position: relative的技术）

我已经尝试：

• 制作标准行，然后用height:0; width: 0; position: relative; top: 1.4rem; left: 0; border: 0.7rem solid white; border-right: 0.7rem solid transparent;固定的div，对于其它方向相反的方式，但排上的两个div并没有出现在同一高度。
• 使左侧的三角形在徘徊或聚焦时不会改变颜色，但我不喜欢那样。
• 而不是使用border -hack与position: relative我用浮动来解决它们。当我也希望链接文本垂直居中时，这并没有奏效。

Answer 1

可以使用伪元素，如:before实现的形状和:after

.box { 
 
    display: block; 
 
    position: relative; 
 
    width: 100px; 
 
    height: 50px; 
 
    background: #000; 
 
    margin-left: 20px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    transition: all 0.5s ease; 
 
    cursor: pointer; 
 
} 
 

 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    border: 25px solid transparent; 
 
    border-right: 25px solid #000; 
 
    left: -50px; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.box:hover { 
 
    background: #eee; 
 
    color: #000; 
 
} 
 

 
.box:hover::after { 
 
    border-right: 25px solid #eee; 
 
}

<a class='box'>Demo Link</a>