Can the height of the underline created using text-decoration: underline; in CSS be adjusted?
I used CSS to apply an underline to the word "about" with an 'id' of '#title4' but I want to increase the space between the word and the underline. How can I achieve this?
Here is an example of what I'm aiming for:
https://i.sstatic.net/A18PL.png
#title4 {
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
text-decoration: underline;
}
It's a challenge to control the height and spacing between text using text-decoration, so I opted for using border-bottom instead. I hope this solution works for you.
#title4 {
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
border-bottom: 5px solid #000;
display: inline-block;
padding-bottom: 10px;
font-family: sans-serif;
}<h1 class="text-center" id="title4">About</h1>The text-decoration-thickness CSS property controls the width of the decoration line applied to text within an element, including options like underline, overline, and line-through.
(Compatible with Edge 87, Firefox 70, Safari 12, Chrome 87)
Usage: auto | from-font | <length>
Example:
.css_class
{
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}<div class="css_class">Test</div>Although I may be arriving late, the information I provide could still prove beneficial to someone out there.
One handy tip is to utilize text-underline-offset: ...px in order to adjust the space between text and underline.
Utilizing the background property in place of border or text-decoration provides us with complete customization.
span {
--color: red;
--position: center bottom;
--width: 50px;
--height: 5px;
background: linear-gradient(var(--color), var(--color)) var(--position) / var(--width) var(--height) no-repeat;
padding-bottom: 10px;
font: bold 2.5rem sans-serif;
}<span>ABOUT</span>Simply follow those instructions and you're done.
#explore{
background-color: #5C6BC0;
width: 80px;
height: 8px;
margin: auto;
display: block;
margin-top: 10px;
}
.text{
text-align:center;
}<h1 class="text">Explore<span id="explore"></span></h1>If you're searching for a solution, this might be what you need. You can achieve the desired effect by implementing a border-bottom as detailed in the following resource:
https://css-tricks.com/styling-underlines-web/
I trust this information will assist you in your quest.
Sorry, it's not possible to do that directly, but there is a workaround available.
One way to achieve a similar effect is by utilizing the following CSS code:
#tile4 {border-bottom: 2px solid #CCC; padding-bottom: 4px}You can customize the width, color, and padding of the underline by adjusting the values in the code snippet above.
You have the option to utilize a pseudo element
#title4 {
position: relative;
font-size: 2rem;
font-weight: 600;
margin-top: 6rem;
padding-bottom: 13px;}
#title4:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 60px;
margin: 0 auto;
height: 2px;
background-color: #333;}
Achieving this is definitely possible
Simply incorporate the provided CSS snippet below
text-decoration: underline;
text-decoration-color: #0000ff;
text-decoration-thickness: 3px; // defining underline thickness
-moz-text-decoration-color: #0000ff;
text-underline-offset: 20px; // adjusting height of underline from textA solution is to make use of the text-underline-offset:
#heading3 {
text-underline-offset: 0.25em; /* You can include this code */
font-size: 2rem;
font-weight: 600;
margin-top: 4rem;
text-decoration: underline;
}
I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...
I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...
Issue at hand: Every time I enter http://localhost:53379 in the browser, it redirects me to http://localhost:53379/#/. Why is the /#/ being added? angular .module('app', ['ngRoute', 'ngStorage']) .config([&apo ...
Although I am not well-versed in coding like many of you, I have been able to customize a free template to suit my needs. However, I am struggling with one aspect. When users submit their information on the contact form, I want their message and details to ...
When the main select tag "category" is changed, it triggers a PHP script to display a new select tag: <select id="category" onchange="showme(this);"> <option value="txt">text</option> <option value="img">image</ ...
I've been attempting to accomplish something without success. The image below should speak a thousand words. My goal is to position div 3, located in div 2, perfectly centered between div 1 and 2 to achieve the desired outcome: Here's my HTML a ...
Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the spec ...
I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...
(my website: ) I am using Wordpress.org and I am trying to create a button that will redirect the user back to the front page, but I am having trouble figuring out how to do it. The button should be located in the top left corner of the site and should not ...
I'm currently in the process of developing a registration form for my JavaFX application. I am faced with an issue where I need to disable certain cells in the date picker when they do not belong to the displayed month. Let's take a look at my cu ...
Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...
My goal is to give users the option to request webpages from my website either directly from the server or by clicking on links, which will be managed by Backbone's router. When a user requests a webpage directly from the server, they will receive a ...
I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...
In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...
Currently, my code is designed to search for job titles on LinkedIn (e.g. Cyber Analyst) and gather all the links related to these job postings/pages. The goal of the code is to compile these links into a list and then iterate through them to print out th ...
Struggling to eliminate a mysterious margin from a div generated by Google Charts, despite no defined margins in the code that could be causing it. Below is a visual representation of the problematic div: div with unidentified margin Any assistance on t ...
Check out my fiddle here: https://jsfiddle.net/oed1k6m7/. It contains two td elements inside the thead. thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } The code above only makes the first row fixed. How can I make b ...
When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...
When it comes to escaping characters in JSP pages, I am wondering which is the better option - using escapeXml or escapeHtml? ...
Looking for a solution to detect when a new user is created with a custom User Role set to lessee. Options include adding a trigger through WordPress filters or actions, or detecting the change in JavaScript using an event listener. I have identified the ...