我试图删除:after部分周围的一些空白，但由于某种原因，在红色边框和"copy"部分之间总是有一点点空白。在顶部，底部和右侧部分。
.c-button--copy:after {
color: #fff;
background-color: #ed1a3b;
content: "copy";
display: flex;
padding: 8px 16px;
position: absolute;
right: 0;
text-transform: none;
}
*, :after, :before {
box-sizing: border-box;
}
.c-button {
border-radius: 50rem;
margin: 8px;
font-weight: 700;
padding: 8px 32px;
border-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
}
.c-button--copy {
color: #000 !important;
text-transform: uppercase;
border: 4px solid #ed1a3b;
padding-right: 88px;
text-align: left;
position: relative;
overflow: hidden;
justify-content: flex-start;
align-items: center;
}<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<a class="btn c-button c-button--white c-button--copy">
Hello
</a>
</body>
</html>如果您有任何问题请告诉我
将overflow:hidden从a中移除，为:after元素添加边框半径(仅在右上角和右下角)，并将其稍微向右移动:right:-2px;
.c-button--copy:after {
color: #fff;
background-color: #ed1a3b;
content: "copy";
display: flex;
padding: 8px 16px;
position: absolute;
right: -2px;
text-transform: none;
border-top-right-radius:50rem;
border-bottom-right-radius:50rem;
}
*, :after, :before {
box-sizing: border-box;
}
.c-button {
border-radius: 50rem;
margin: 8px;
font-weight: 700;
padding: 8px 32px;
border-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
}
.c-button--copy {
color: #000 !important;
text-transform: uppercase;
border: 4px solid #ed1a3b;
padding-right: 88px;
text-align: left;
position: relative;
justify-content: flex-start;
align-items: center;
}<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<a class="btn c-button c-button--white c-button--copy">
Hello
</a>
</body>
</html>