Add a child <span> element within the text decoration

Why doesn't the text-decoration on a link include the child element (span), causing the underline to not extend properly?

https://i.sstatic.net/A3Yth.png

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>

View the fiddle here

Is there a way for the span to be included in the styling or does text-decoration intentionally ignore spans?

cssbootstrap-4text-decorations

Answer №1

Visit this link for more information about CSS text decoration:

The text-decoration shorthand property in CSS determines how decorative lines are displayed on text.

The underline generated will specifically appear under the text itself, rather than below the entire element. Upon closer inspection, you'll notice that the underline aligns directly with the word "special."

If you wish to extend the line further under "special," one approach could involve utilizing a pseudo-element for your badge and incorporating non-breaking spaces to position it accordingly:

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

The reason for this issue lies in the CSS specification, which dictates that text-decoration cannot be applied to inline block elements. To ensure that your span is also affected by text-decoration, you will need to change the display:inline-block. For more detailed information, refer to this question.

To illustrate how it would function if the span was impacted by the text-decoration, consider the following 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>

Additionally, while the code you posted on SO demonstrates proper functionality of the text-decoration property, it may not work correctly in a fiddle. If you desire consistent presentation throughout the entire link, consider utilizing border instead.

Answer №3

To add text-decoration to the span element, you may notice that it displays just below the span's text rather than being in line with the text before it. To align it inline, ensure that the span's height matches its parent container. Another option is to utilize a pseudo element (:before or :after) to position the line where desired.

Answer №4

Instead of using the text-decoration property, consider utilizing the border-bottom property.

Additionally, I have converted the a element 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 badge's content has a unique font size and an alignment offset of top:-5px. These differences cause the text to break its line, even without using Bootstrap badge. The text-decoration may appear broken and not as intended. Additionally, Bootstrap badge includes the style of text-decoration: none... To achieve a dotted underline extending under the badge, you can remove text-decoration and utilize border-bottom as shown below:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Collapse the borders of Angular's div layout container

I need help with collapsing the borders of div containers when generating a table using angular material's layout system. To see what I have done so far, please refer to my jsfiddle linked below: Jsfiddle Below is the HTML code snippet. Any guidance ...

htmlcssangularjs

Hide the entire TR if Mysql equals zero

How can I apply the style "display: none;" to an entire TR if the result from row credits is 0? Should I achieve this using CSS or a MySQL query? <?php $username = "root"; $password = ""; $database = "aaa"; $mysqli = ne ...

phpcssmysql

Struggling with creating a responsive navigation bar using Bootstrap

We're in the process of crafting a fresh new website, and our designer has put together a navigation bar with a unique curve that has left us scratching our heads! Here's a look at our current header setup: This is the current HTML code for our ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navigation

Apply a specific style conditionally using Angular's ng-repeat directive

Currently, I am utilizing ng-repeat to iterate through a list of divs and manually adding items to the JSON that is rendering these divs. My goal is to position the last div that I add in the JSON at the location where the mouse cursor is, while keeping th ...

javascriptjqueryhtmlcssangularjs

Tips for positioning a div within a grid:

Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...

htmlcss

Issue with Bootstrap 4: Dropdown menu extends beyond the edge of the screen towards the right side

I'm having trouble with the dropdown items extending off the page. I've tried a few solutions from BS3 but they don't seem to be working for me. I suspect it might have something to do with the ml-auto class. (please disregard the if-else st ...

twitter-bootstrapcssbootstrap-4

Tips for wrapping text in an image overlay

Currently immersed in a school project, I find myself at the initial stages of developing a product page. Employing an image overlay to display a product description on hover, however, I am encountering an issue where the text overflows beyond the containe ...

htmlcss

Toggle JavaScript Query Display

Welcome to my HTML test website where I am testing show/hide JavaScript functionality. Upon loading the page, you may notice that everything is hidden until a button is clicked. <html> <head><title>Test</title> <scr ...

javascripthtmlcss

Aligning adaptable content using css

Currently, I am facing a challenge in centering an (inline?) element horizontally within my container div. My goal is to have "some text" with a background that retracts to it, and to achieve this while keeping everything centered within the containing ele ...

csspositioninginline

Adjust header display for smaller screens

Looking for help with adjusting my header design on small screens: https://i.sstatic.net/x8BTo.png I want the search bar to go underneath on smaller screens, like this example: https://i.sstatic.net/x4RFi.png I've tried changing the position to rel ...

htmlcssjsx

How does the use of <ol> with list-style-type: disc; differ from that of <ul>?

Why create a separate <ul> when visually both unordered lists and ordered lists look the same? <head> <title>Changing Numbering Type in an HTML Unordered List Using CSS</title> <style> ol { list-s ...

htmlcsshtml-lists

Align the text vertically within a table-styled div

My goal is to align all text vertically. If I eliminate float: left; then the entire table disappears? .div-table{ display:table; width:auto; background-color:#ffffff; border-spacing:20px; } .div-table-row{ di ...

htmlcssvertical-alignment

What is the best way to customize the appearance of the input checkbox in Twitter Bootstrap?

I need help in creating a simple input checkbox since I couldn't find any optional class in Bootstrap. I also checked libraries on GitHub but nothing seems as straightforward as Foundation. Thank you for your assistance. ...

csstwitter-bootstrap

Complete visibility of Bootstrap progress labels is compromised

Progress bar with a customized label inside: <div id="progress" class="progress mb-1" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valu ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Is it normal for a dropdown in the pusher not to show when using a sidebar? I tried setting overflow-visible but it didn't work. Any suggestions on how to resolve this? Check out this JSFiddle example: https://jsfiddle.net/3djmjhn5/1/ Code: $(&ap ...

htmlcsssemantic-ui

What is the best way to ensure that my grid remains contained within its designated area?

I need to incorporate a grid of 16x16 or 64x64 into my layout without it overflowing. I'm considering using flexbox, but unsure of the implementation process. My goal is to have the grid resize based on the container size rather than exceeding its bou ...

javascripthtmlcss

Is drag and drop functionality in Safari on iOS automatically enabled, or will I need to write code to implement it myself?

Is there a way to detect when an HTML element is being dragged and dropped specifically for Safari events? For drag and drop functionality on Safari iPad, do I need to manually detect mousemove events on HTML elements and update their positions as the mou ...

javascripthtmlcsssafaridrag-and-drop

Exploring Scrollbar Components with CSS Selector in Selenium

Here is an xpath used to access scroll bar elements: /html/body/div/div[3]/div/div[2]/div[2]/div[1]/table/tbody/tr/td/table/tbody/tr[5]/td/div/table[4]/tbody/tr/td/table/tbody/tr/td[3]/div/div/div/div[4]/div[1]/div[3] I captured this xpath with Firepath, ...

javahtmlcssseleniumxpath

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

jquerycssdatepickermodal-dialog

Guide on activating javascript code for form validation using php

How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...

javascriptphphtmlcss