Ways to emphasize text in a h2 header without affecting other elements

Question

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble:

<h2><span class="numbers">1.1 </span>header text</h2>

It's important to note that I did not write this HTML code, so my options for changing it are limited. However, I can apply some CSS styling.

My goal is to underline the text "header text" without affecting the 1.1.

When attempting to achieve this with CSS and using

h2 {text-decoration: underline;}

The entire line gets underlined, which poses a challenge since I cannot override the text-decoration of h2. This has left me unsure how to proceed.

(An example of the issue is presented below)

h2   { text-decoration: underline; }
span { text-decoration: none;      }

<h2><span class=numbers>1.2 </span>header text</h2>

html css

Answer 1

Answer №1

If you want to create an effect where the numbers appear underlined but blend in with a white background, you can use this CSS code:

h2 {
  text-decoration: underline;
}

.numbers {
  text-decoration: underline;
  text-decoration-color: white;
}

<h2><span class="numbers">1.1 </span>header text</h2>

Answer 2

If you want to create an effect where the numbers appear underlined but blend in with a white background, you can use this CSS code:

h2 {
  text-decoration: underline;
}

.numbers {
  text-decoration: underline;
  text-decoration-color: white;
}

<h2><span class="numbers">1.1 </span>header text</h2>

Answer 3

Answer №2

It may seem like using text-decoration is not the solution here (UPDATE: Actually, you can achieve this with just text-decoration), especially if you want to underline text only. In that case, you can try using border-bottom in a creative way like so:

h2 {
  border-bottom:2px solid; 
  display: inline-block;
}
span {
  display: inline; 
  background-color: #fff; 
  padding: 3px 0;
}

Check out this example for reference: https://jsfiddle.net/DeepakKamat/eqjsg0nL/

To conceal the border on the parent element, apply a background color and vertical padding to the span.

Answer 4

It may seem like using text-decoration is not the solution here (UPDATE: Actually, you can achieve this with just text-decoration), especially if you want to underline text only. In that case, you can try using border-bottom in a creative way like so:

h2 {
  border-bottom:2px solid; 
  display: inline-block;
}
span {
  display: inline; 
  background-color: #fff; 
  padding: 3px 0;
}

Check out this example for reference: https://jsfiddle.net/DeepakKamat/eqjsg0nL/

To conceal the border on the parent element, apply a background color and vertical padding to the span.

Ways to emphasize text in a h2 header without affecting other elements

Answer №1

Answer №2

Similar questions

Invoke a function using the output of a different function

Is it possible to extract only the Bolded Text and store it in a String Array within a Spanned String

Material UI Grid Items not stretching to fill the entire available width

Issue with functionality of Bootstrap template generated by Visual Studio 2013

Do double forward-slash comments work in CSS code?

How can I convert an HTML table into a PDF using TCPDF while ensuring that all content is contained within a single div in PHP?

the process of triggering animation to start automatically when a button is clicked in Web Development

Switching from real pixels to CSS pixels

The Laravel href link will fail to work when the URL does not include the string 'http'

How can I include multiple search forms on a single page in TYPO3 Ke_Search without any conflicts between them?

Optimize the size of div elements using jQuery

What is the best way to update the div id by extracting the last digits from a number?

What is the best way to retrieve the parent div's ID with JavaScript and Selenium?

What is the best way to retrieve the value of an object in PHP?

How can you fix a navbar that won't stay in place?

Creating a flexible grid layout in CSS without relying on any pre-made frameworks

What is the best way to transfer a variable from the Cold Fusion back-end page to the HTML front-end section within a CFM file using jQuery Ajax?

Making adjustments to a Jquery data attribute can have a direct impact on CSS

Adjust the background color of alternate elements

What is the best way to invert the positioning of the li elements to move upwards?