I would like to add an underline below the title

.thumb-text {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.thumb-text h3 {
  font-family: Georgia;
  font-size: 30px;
  color: black;
  font-weight: 900;
}

.thumb-text h3::after {
  content: '';
  position: absolute;
  top: 100;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0))
}
<div style="text-align: center;" class="thumb-text">
  <h3> Title </h3>
  <p> description </p>
</div>

My attempt to create a gradient underline using ::after was successful when there was only a title present. However, upon adding another text below the title, the underline shifted below the added text instead of following the original rule set in ::after. I noticed that there were no issues when using a border-bottom property in h3 instead of a gradient underline. It appears that there might be an issue with my implementation of ::after. Can someone assist me in resolving this problem?

htmlcss

Answer №1

Adjust the position of the underline in relation to the h3 heading by setting its position to relative.

.thumb-text {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.thumb-text h3 {
  font-family: Arial;
  font-size: 28px;
  color: navy;
  font-weight: bold;
  
  position: relative;
}

.thumb-text h3::after {
  content: '';
  position: absolute;
  top: 100; right: 0; bottom: 0; left: 0;
  height: 3px;
  background: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0))
}
<div style="text-align: center;" class="thumb-text">
  <h3> Heading Text </h3>
  <p> Additional Information </p>
</div>

Answer №2

It seems that the h3 element is missing a position relative attribute, causing the h3::after pseudo-element to not align properly with the h3.

By default, the position for any HTML element is static unless explicitly defined.

.thumb-text {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.thumb-text h3 {
  position: relative;
  font-family: Georgia;
  font-size: 30px;
  color: black;
  font-weight: 900;
}

.thumb-text h3::after {
  content: '';
  position: absolute;
  top: 100;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0))
}
<div style="text-align: center;" class="thumb-text">
  <h3> Title </h3>
  <p> description </p>
</div>

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

Hover over two different divs with JQuery

I have a situation where I have two HTML table rows. When I hover over the first row, I want to display the second row. However, once the mouse leaves both rows, the second row should be hidden. Is there a way to achieve this using JQuery? <tr class=" ...

javascriptjqueryhtmlcss

When the user saves the changes on the pop-up window, the main window will automatically refresh

I currently have a calendar feature that allows users to create, edit, and delete appointments. When a user clicks on the new appointment button, it opens a window above the calendar interface. Once the user fills out the necessary fields and clicks save, ...

phpjavascriptjquerymysqlhtml

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. https://i.sstatic.net/kRJOb.png Here is my HTML code: <section class="favorit ...

javascripthtmlcssangulartypescript

How to adjust the size of a div based on its child content, including margins

I have encountered an issue with animating the height of a configurable content div, which typically contains paragraphs of text. Shown below is my animation (slowly paced), starting from a height of 0 and expanding to its calculated height based on its c ...

htmlcss

Save to clipboard HTML with forward slash

I need help creating a button that will copy a specific text to the clipboard when clicked. <button onclick="copyToClipboard('A\B\C\D')">Click here</button> However, I've encountered an issue where the text copie ...

html

The margin-bottom attribute for the final element within a div does not cause the div to be "stretched."

Having a div with a background image containing an element with margin-bottom applied can cause a gap between that div and another one below it, also with a background image. This leads to the issue illustrated in this screenshot: Screenshot http://img40.i ...

htmlcssmargin

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

What causes the difference in CSS border-bottom-width rendering between IE and Chrome?

My ASP:MENU is styled with some CSS properties, such as setting the 'height' and 'line-height' of each element to 15px. This design appears fine in Internet Explorer but seems too cramped in Chrome. Additionally, a 'border-bottom-s ...

asp.nethtmlcssweb

Troubleshooting problems with resizing images using CSS

I am experiencing an issue with resizing images that I have configured in the admin panel. .users-list>li img { border-radius: 50%; max-width: 100%;    height: auto;     width: 100px;     height: 100px; } When enlarged, the images l ...

htmlcssimage

Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have - .font-size-add-class { background-color: #2f2f2f; color: #f9f7f1; } .font-sizes { text-align: right; display: table; margin-top: 15px; cursor: pointer; } .font-sizes > .small { font-size: 12px; } .font ...

css

The navigation bar vanishes from sight while scrolling underneath other sections

UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...

jqueryhtmlcsssass

What is the best method for obtaining table structure using Bootstrap dropdowns?

[Using span instead of table element][1] [Using the table element][2] Currently working with Bootstrap 5, my goal is to have a fixed-width table in place of dropdown menu items. I aim to position the text in the 3rd column all the way to the right. The da ...

htmlcssbootstrap-5

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

jquerycsskeyvaluepair

Is it possible to craft poetic lines with indents in HTML using blockquotes, pre, or dd tags?

I am struggling to format a few lines of text with indentations using HTML. Here is an example I found: HERE Below is my attempt: <p><code>"Knowing is not enough. We</code></p> <p><blockquote><code>must apply. Wi ...

htmlpredd

Consolidate HTML project into a unified HTML file

In my current project, I am working with a static HTML report that is organized in the structure outlined below: 1.css 2.font 3.js 4.pages 5.attachments 6.index.html I would like to know how I can combine all these elements to create a unified 'repor ...

javascripthtmlnode.jsnpm

Unexpected character appearing in Android 2.3, whether using the li or ul tag

Having an issue with my social icons on the top of my website displaying unwanted symbols in Android 2.3. Can't figure out the cause even after ruling out <a> tags and associated CSS. Any thoughts on what the problem might be? I've remove ...

androidhtmlcss

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Take a look at the HTML code snippet I'm currently working on... <div id="projects"> <H1 class="projects">PROJECTS</H1> <div class="box"></div> <div class="box"></div> <div class="box"></ ...

htmlcss

The Bootstrap toggler is failing to conceal

Currently, I am working on a website utilizing Bootstrap 5. The issue arises with the navbar - it successfully displays the navigation when in a responsive viewport and the toggler icon is clicked. However, upon clicking the toggler icon again, the navigat ...

javascripthtmlnavbarbootstrap-5

utilizing AJAX to send a POST request and display the response in HTML using Django

I am looking to input a number into a text box and retrieve all the even numbers using ajax with Django. Here is my view: load_template @csrf_exempt def load_template(request): if request.method == 'POST': num1 = request.POST[&a ...

javascriptjqueryhtmlajaxdjango