在 text-decoration 中包含子 span 元素

Question

在链接上使用 text-decoration 时，不包含子元素 (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 属性设置装饰线的外观在文本上。

这意味着下划线将直接位于相关文本下方，而不是元素下方。如果你放大到足够大，你会看到下划线实际上是在单词 special 下方

如果你想在 special 下继续这行，也许你可以为你的徽章使用一个 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

您可以将 text-decoration 应用于您的 span，但它会显示在 span 文本下方，而不是与前面的文本内联。要使其内联，您需要使跨度与其父容器的高度相同。或者，您可以使用伪元素（:before 或 :after）将行放在您想要的位置。

Answer 3

发生这种情况是因为 CSS 规范基本上说，内联块元素中不能有文本装饰。如果你的 span 也受到 text-decoration 的影响，你必须改变 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。这两个打破了界限，即使不使用引导徽章，你也会破坏文本装饰。是的，它会扩展到跨度文本，但会被破坏，这不是你想要的。而且 bootstrap 徽章也有 text-decoration 的风格：none... 另一种获取虚线下划线以扩展徽章的方法是删除文本装饰并使用如下所示的边框底部：

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

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