在文本修饰中包含子跨度元素

Question

在 link 上使用文本装饰时，不包括子元素 (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

您可以对跨度应用文本装饰，但它会出现在跨度文本的正下方，而不是与前面的文本内嵌。要使其内联，您需要使跨度与其父容器的高度相同。或者，您可以使用伪元素（:before 或 :after）将行放在您想要的位置。

Answer 2

发生这种情况是因为 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 中发布的代码中，文本修饰属性工作正常，只是不在 fiddle 中。如果您希望它在整个 link 中都相等，请尝试 使用边界 。

Answer 3

您可以使用 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 4

徽章中内容的字体大小与其他 link 文本不同，并且您的对齐方式也为 top:-5px。这两个打破了界限，即使不使用 bootstrap 徽章，你也会破坏文本装饰。是的，它会扩展到跨度文本，但会被破坏，这不是您想要的。而bootstrap徽章也有文字修饰的样式：none... 另一种获得虚线下划线以扩展徽章的方法是删除文本装饰并使用 border-bottom 如下所示：

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

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

Answer 5

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

The text-decoration shorthand CSS property sets the appearance of decorative lines on text.

这意味着下划线将直接位于相关文本下方，而不是元素下方。如果你足够放大，你会看到下划线实际上是在 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>

在文本修饰中包含子跨度元素

Include child span element in text-decoration

css

bootstrap-4

text-decorations