Question

在链接上使用文本装饰时，不包含子元素（span），因此下划线不会扩展：

a {
  font-size: 36px;
  text-decoration: underline dotted rgb(221, 221, 221);
  color: #000;
}

a:hover {
  text-decoration: none;
  color: #000;
}

.badge-dark {
  font-size: 9px;
  margin-left: 2px;
  position: relative;
  text-align: center;
  top: -5px;
}

<a href="#">
   My title is here
   <span class="badge badge-dark">Special</span>
</a>

See fiddle

是否可能包含span或text-decoration在设计上忽略跨度？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration：

text-decoration速记CSS属性设置文本上的装饰线的外观。

这意味着下划线将直接位于相关文本的下方，而不是元素的下方。如果放大得足够大，您会看到下划线实际上在特殊字下

如果要在特殊位置继续该行，也许可以使用pseduo元素作为徽章，并添加一些不间断的空格以使其位于：

a {
  font-size: 36px;
  text-decoration: underline dotted rgb(221, 221, 221);
  color: #000;
}

a:hover {
  text-decoration: none;
  color: #000;
}

.badge {
  display: inline-block;
  position: relative;
  text-decoration: underline dotted rgb(221, 221, 221);
}

.badge-dark:after {
  content: 'Special';
  display: inline-block;
  color: #ffffff;
  background: #555555;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 9px;
  position: absolute;
  text-align: center;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -5px;
}

<a href="#" class="badge badge-dark">
   My title is here 
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</a>

Answer 2

您可以将文本装饰应用于跨度，但是它将显示在跨度文本的正下方，而不与前一个文本内联。要使其内联，则需要使跨度与其父容器的高度相同。另外，您可以使用伪元素（：before或：after）将行放置在所需位置。

Answer 3

发生这种情况是因为CSS规范从根本上说，内联块元素中不能包含文本修饰。如果跨度也受文本装饰的影响，则必须更改 display：inline-block 。可以找到更多信息in this question。

仅向您展示，如果跨度受文本装饰影响，它将如何工作，下面是一个示例：

a {
  font-size: 36px;
  text-decoration: underline dotted rgb(221, 221, 221);
  color: #000;
}

a:hover {
  text-decoration: none;
  color: #000;
}

.badge-dark {
  font-size: 20px;
  margin-left: 2px;
  position: relative;
  text-align: center;
  top: -5px;
}

<a href="#">
   My title is here
   <span class="badge badge-dark">Special</span>
</a>

此外，在您以SO语言发布的代码中，text-decoration属性可以正常工作，只是摆弄不上。如果您希望它在整个链接中都相等，请尝试使用边框。

Answer 4

您可以使用border-bottom属性代替text-decoration。

还看到我将a更改为inline-block元素。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  padding: 10px;
}


.title-link {
  display: inline-block;
  font-size: 36px;
  border-bottom: 4px dotted rgb(221, 221, 221);
  color: #000;
  text-decoration: none;
}

.title-link:hover {
  border-bottom: none;
  color: #000;
  text-decoration: none;
}

.badge-dark {
  font-size: 9px;
  margin-left: 2px;
  position: relative;
  text-align: center;
  top: -5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col">
      <a class="title-link" href="#">My title is here
      <span class="badge badge-dark">Special</span></a>
    </div>
  </div>
</div>

Answer 5

徽章中内容的字体大小与其他链接文本不同，并且还具有top：-5px对齐。这两个使行中断，即使不使用引导标志，您也会破坏文本装饰。是的，它将扩展到跨度文本，但会损坏，并且不是您想要的。引导徽章还具有文本装饰样式：无... 另一种获得虚线下划线以扩展徽章的方法是删除文本装饰并使用如下所示的边框底部

      a {
        font-size: 36px;
        border-bottom: 3px dotted rgb(221, 221, 221);
        color:  #000;
      }

      a:hover {
        color: #000;
        border-bottom: none;
      }

在文本装饰中包含子范围元素

5 个答案: