CSS всплывающая подсказка со стрелкой и рамкой

Question

Я пытаюсь использовать CSS-подсказку с белым фоном и границей 1px. Как получить границу вместо простой черной стрелки?

.up-arrow { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 1px solid #777777; 
 
    text-decoration: none; 
 
    border-radius: 2px; 
 
    padding: 20px; 
 
} 
 
.up-arrow:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 140px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid black; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

PS: Даже если он похож на другой вопрос, детали дизайна очень важны. Например, изначально здесь было 3 разных ответа (теперь 2 из них удалены), немного отличающихся по дизайну. Даже если совсем немного, их взгляд на стрелку был немного менее совершенным, чем настоящий идеальный ответ! Дьявол в деталях!
Целью здесь является простая белая подсказка с шириной 1 пикселя. Даже если похожий взгляд на какой-то другой, это не дубликат другого вопроса (пузырь речи). Еще раз детали важны для достижения такого гладкого вида.

Answer 1

Одним из решений будет добавление другого псевдоэлемента :before, который немного меньше :after. Это не самое приятное решение, но оно отлично подходит для конкретных случаев.

(Вы можете заметить, что я также очистить свой код немного и заменить :after с :before иметь надлежащую Z-индекс для обоих псевдослучайных элементов. Дайте мне знать, если вам нужна дополнительная объяснение)

.up-arrow { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 1px solid #777777; 
 
    text-decoration: none; 
 
    border-radius: 2px; 
 
    padding: 20px; 
 
    margin-top: 50px; 
 
} 
 
.up-arrow:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 140px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border: 10px solid transparent; 
 
    border-bottom-color: black; 
 
} 
 

 
.up-arrow:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 141px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border: 9px solid transparent; 
 
    border-bottom-color: white; 
 
}

<div href="#" class="up-arrow">Button with Up Arrow</div>