關於按鈕懸停，單擊和邊框的奇怪的CSS問題？

Question

下面是jsddle。 https://jsfiddle.net/xuhang1128/cmkbu07s/2/主要相關代碼如下。 我使用React和React-boostrap來實現它。

.design2-statusMonitor {
    margin-top: 20px;
    .list-group-item {
        display: inline-block;
        background-color: transparent;
       // border: none;
        border-right: 1px solid #CAD5E0;
        border-top: 1px solid #CAD5E0;
        border-bottom: 1px solid #CAD5E0;
        width: auto;
        &.selected {
            background-color: #2f749a;
        }
    }

    .list-group-item:after {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        right: -6px;
        top: 43%;
        z-index: 2;
        background-color: white;
        border-top: 2px solid #CAD5E0;
        border-right: 2px solid #CAD5E0;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    .list-group-item.selected:after {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        right: -6px;
        top: 43%;
        z-index: 2;
        background-color: #2f749a;
        border-top: 2px solid #CAD5E0;
        border-right: 2px solid #CAD5E0;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }


    .list-group-item:hover {
        background-color: #c0d5e0;
        color: white;
    }
    .list-group-item:hover:after {
        background-color: #c0d5e0;
    }
}

您可以看到，當我單擊任何氣泡按鈕時，三角形看起來不正常，如下所示。 當我將鼠標懸停在按鈕之外並單擊其他任何位置時，氣泡按鈕是否正常？

有人可以幫我修復它嗎？ 非常感謝。 我已經研究了它，並用谷歌搜索了很多，沒有結果。

Answer 1

從按鈕焦點移除輪廓

button:focus {
  outline:none;
}

https://jsfiddle.net/cmkbu07s/3/

Answer 2

當我們單擊一個按鈕時，它會聚焦並出現輪廓。

只需通過添加使輪廓消失或刪除即可

outline:none;

https://jsfiddle.net/cmkbu07s/4/