-webkit-text-stroke 밑줄표시

-webkit-text-stroke를 쓰면 글자끝마다 이상한 무늬가 추가됩니다.

-webkit-text-stroke를 쓰면 밑줄표시로 쓰지말라는 표시가 나오는데 이제 더이상 안쓰는건가요??

html소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS호버이펙트 아웃라인 텍스트</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a class="btn" href="#none" data-text="Portfolio">Portfolio</a>
</body>
</html>

css 소스코드

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #000;
    color: #fff;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn{
    color: transparent;
    text-decoration: none;
    font-size: 10em;
    font-weight: 600;
    -webkit-text-stroke: 1px red;
}

Inflearn Community Q&A