如何让锚点标签内容溢出自身边框，实现裁剪镂空效果？

需求说明 #

需要将<a>标签设置为右侧边框带有与文本行高匹配的镂空效果的样式，要求按钮背景必须透明，当前代码无法实现右侧边框的裁剪镂空效果。

解决方案 #

通过CSS的clip-path属性对伪元素的边框进行精准裁剪，控制右侧边框的镂空区域与文本行高对齐，无需额外嵌套元素，实现简洁且兼容性较好。

代码实现 #

CSS代码 #

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  padding: 10px 20px;
  line-height: 1.5; /* 定义文本行高，可按需调整 */
}

a::before {
  content: "";
  position: absolute;
  inset: 0; /* 等同于top:0; right:0; bottom:0; left:0 */
  border: 1px solid red;
  /* 裁剪路径：右侧中间留出与行高匹配的镂空区域 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(50% - 0.75em), /* 上半边框结束位置，0.75em为行高1.5的一半 */
    calc(100% - 1px) calc(50% - 0.75em), 
    calc(100% - 1px) calc(50% + 0.75em), 
    100% calc(50% + 0.75em), /* 下半边框开始位置 */
    100% 100%, 
    0 100%
  );
}

HTML代码 #

<a href="#">Neem contact met ons op</a>

说明 #

• clip-path中的0.75em由行高1.5计算得出（1.5em / 2 = 0.75em），若调整行高，需同步修改该值以保证镂空区域与文本高度匹配。
• inset:0让伪元素完全覆盖父元素<a>，确保边框整体范围正确。
• 背景透明需求通过不设置伪元素和<a>的background属性自然实现。

内容的提问来源于stack exchange，提问作者Yoraplat