Include child span element in text-decoration - css

Question

When using text-decoration on a link, the child element (span) is not included, so then the underline doesn't extend:
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
Is it possible for the span to be included or is text-decoration ignoring spans by design?

Answer 1

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.
This means that the underline will be directly under the text in question and not under the element. If you zoom in enough, you will see the underline is actually under the word special
If you want to continue the line under special, perhaps you could use a pseduo element for your badge and add some non-breaking spaces for it to sit in:
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
</a>

Answer 2

You can apply text-decoration to your span, however it will appear just under the span text and not inline with the preceding text. To make it inline you will need to make your span the same height as its parent container. Alternatively you can likely use a pseudo element (:before or :after) to put the line where you want it.

Answer 3

This happens because of the CSS specification that basicly say, you can't have text-decoration in inline block elements. If you span to also be affected by text-decoration, you must change the display:inline-block. Further information can be found in this question .
Just to show you , how it would work, if the span was being effected by the text-decoration, here is an example:
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>
Also, in the code you posted in SO, the text-decoration property is working properly, just not in the fiddle. If you want it to be equal through the whole link, try using border instead.

Answer 4

You can use border-bottom property instead of text-decoration.
also see that I have changed the a to an inline-block element.
.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

The font size of the content in the badge is different from the other link text and you also have an alignment of top:-5px. These two break the line and even without using the bootstrap badge you would get the text-decoration broken. Yes it would extend to the span text but be broken and it would not be what you want. And bootstrap badge also has the style of text-decoration: none...
Another way of getting the dotted underline to extend the badge is removing the text-decoration and using border-bottom like this below:
a {
font-size: 36px;
border-bottom: 3px dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
color: #000;
border-bottom: none;
}