Question

我有以下代码，我无权更改html。如何提供边框底部或文本修饰：仅限于thefrontbottoms.com。

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

实际结果：border-bottom to “Back To FrontBottoms.com”

预期结果：边框底部至“返回 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>

Answer 2

.headera {
    overflow: hidden;
    position: relative;
    width: 195px;
}
    .headera a:after
    {
background: #fff none repeat scroll 0 0;
    border-right: 1px none white;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 1px;
    margin-left: 55px;
    right: 0;
    width: 139px;
}

使用此

Answer 3

这也可以用小jQuery

完成

$(document).ready(function(){
  $('a').html("Back To <span>TheFrontBottoms.com</span>");
});

a{
  text-decoration: none;
}

span{
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headera">
  <a target="_blank" href="http://thefrontbottoms.com">Back To TheFrontBottoms.com</a></div>

Answer 4

请改为：

<style>
  .headera a {
    text-decoration: none;
  }
  .headera a span {
    text-decoration: underline;
    /* or */
    border-bottom: 1px solid blue;
  }
</style>

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

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

4 个答案: