html - 如何仅为 anchor 标记中的选定文本提供边框

Question

我有以下代码，我无权更改 html。如何给 border-bottom 或文本装饰:下划线只给 thefrontbottoms.com。

<div class="headera">
  <a target="_blank" href="http://thefrontbottoms.com">Back To TheFrontBottoms.com</a></div>

实际结果:border-bottom 到 "Back To FrontBottoms.com"

预期结果:border-bottom 到“返回 FrontBottoms.com”

Answer 1

由于您无法访问 HTML，这可能是您能做的最好的事情

a{
  text-decoration: none;
}

a:before {
  content: '';
  position: absolute;
  border-bottom: 1px solid rgb(0, 0, 238);
  width: 145px;
  top: 24px;
  left: 68px;
}

<div class="headera">
  <a target="_blank" href="http://thefrontbottoms.com">Back To TheFrontBottoms.com</a></div>