如何将边框部分包裹在元素的三个边上？

Question

我需要一个复杂的锚元素边框。不幸的是，我只能使用锚元素的 CSS 类来解决整个问题，因为我没有任何布局选项。

我已经用背景线性渐变对其进行了测试，但没有达到满意的结果。

无论字体大小和文本长度如何，这都是应有的图像。

:root {
  --gb-nav-btn-color-hover: red;
}

a {
  border-radius: 0px;
  display: block;
  line-height: 30px;
  width: fit-content;
  height: fit-content;
  padding-right: 25px;
  background: linear-gradient(to bottom, var(--gb-nav-btn-color-hover) 2px, transparent 2px) 2px 0px, linear-gradient(to left, var(--gb-nav-btn-color-hover) 2px, green 2px) 0px -7px;
  background-repeat: no-repeat;
  background-position: center, center, center;
}

<a href="">An anchor element</a>

Answer 1

伪元素来救援。我使用了

em

单位（根据 Roko C. Buljan 的有用提醒）来保持设计的各个方面与字体大小成比例。

此外，我还在自定义属性中放置了一些常用值，以便于配置。

:root {
  --descender-height: 0.215em;
  --end-padding: 0.45em;
  --border-width: 0.07em;
}

a.fancy {
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 48px;
  color: black;
  padding-right: var(--end-padding);
  border-top: var(--border-width) solid;
  position: relative;
}

a.fancy::before,
a.fancy::after {
  content: '';
  position: absolute;
  background: black;
  width: var(--border-width);
  height: calc(100% - var(--descender-height));
  right: 0;
}

a.fancy::after {
  width: var(--end-padding);
  height: var(--border-width);
  bottom: var(--descender-height);
}

a.fancy.small {
  font-size: 32px;
}

a.fancy.very-small {
  font-size: 24px;
}

body {
  padding: 20px;
}

<a href="" class="fancy">An anchor element</a>
<br><br><br>
<a href="" class="fancy small">An anchor element</a>
<br><br><br>
<a href="" class="fancy very-small">An anchor element</a>

Answer 2

.box {
  color: black;
  font-size: 2rem;
  border-left: none;
  display: inline-block;
  border-top: solid 3px black;
  box-sizing: border-box;
  font-family: Arial;
  height: 30px;
}

.box__link {
  display: inline-block;
  height: 100%;
  text-decoration: none;
  color: black;
  margin-left: -2.5px;
}

.box__link::after {
  width: 28px;
  border-bottom: solid 3px black;
  content: ' ';
  display: inline-block;
  position: relative;
  border-right: solid 3px black;
  height: 100%;
  margin-left: -6.5px;
  margin-bottom: -0.2px;
}

<div class="box">
    <a href="#" class="box__link">Home</a>
</div>

Answer 3

a {
  display: inline-block;
  padding: 8px 0; 
  position: relative;
  text-decoration: none; 
  color: black;
}

a::before,
a::after {
  content: '';
  position: absolute;
  height: 2px; 
  background: black;
}

a::before {
  top: 0;
  left: 0;
  right: 0;
}

a::after {
  bottom: 0;
  left: 100%; 
  width: 100px;
}

<a>Home</a>

希望对你有帮助