（CSS）リンク<私はこのフォームを持つHTMLリンクを作成したい=

Question

：

そのリンクが推移やそのフォームはその色を変更する必要があります焦点を当てて

• 。
• リンクのテキストはリンクの中央にある必要があります。通常はdisplay: blockです。
• これは同じ方法で同じ行の他の方向のリンクを作成する際に問題になることはありません。
  • 正常行を製造し、次いでheight:0; width: 0; position: relative; top: 1.4rem; left: 0; border: 0.7rem solid white; border-right: 0.7rem solid transparent;とdiv要素を固定する他の方向とは反対の方法のために、私はすでに試みた何

  （Iは、position: relativeと技術を使用した場合、私はこれで問題がありました）行の上の2つの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>