How to create Underline Input Text Field using CSS ?

How to Set the Gap Between Text and Underlining using CSS?

Last Updated : 14 Nov, 2024

The gap between text and underlining is the space you can create between the text and underline, making it text easier to read and look better.

Using `text-underline-offset Property`

To set the gap between text and its underline in CSS, use the text-underline-offset property. This property defines the distance between the text and the underline, improving the readability of the content.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .normal-underline {
            text-decoration: underline;
            text-underline-offset: 0px; 
        }

        .spaced-underline {
            text-decoration: underline;
            text-underline-offset: 10px; 
            text-decoration-thickness: 3.1px; 
        }
    </style>
</head>

<body>
    <h1 class="normal-underline">
       Code World : with normal underline
    </h1>

    <h1 class="spaced-underline">
       Code World : with spaced underline
    </h1>
</body>

</html>

Output

Output

How to create Underline Input Text Field using CSS ?

gurrrung

Improve

Article Tags :

Similar Reads

How to Set the Gap Between Text and Underlining using CSS ?

The gap between text and underlining is the space you can create between the text and underline, making it text easier to read and look better. Using text-underline-offset PropertyTo set the gap between text and its underline in CSS, use the text-underline-offset property. This property defines the

How to create Underline Input Text Field using CSS ?

Input Text Field can be underlined by implementing different approaches to applying a bottom border to an input text field, using various methods such as HTML and CSS. Styling input text fields is a crucial aspect of web development, and adding a bottom border is a common way to enhance the visual a

How to Underline Text using CSS?

To underline a text using CSS, the CSS text-decoration property is used with the value set to underline. Using text-decorationWe use the text-decoration CSS property to underline a text using CSS. The text that is to be underlined is inserted in a <p> tag and the property is applied. Syntax te

How to remove underline from a:before using CSS ?

The a:before is used to create an element before the content of the anchor tag and it displays underlined a:before part by default. To remove the underline from a:before using the text-decoration property of CSS and set element display to inline-block. Syntax: text-decoration:none; display:inline-bl

How to add underline to canvas-type text using Fabric.js ?

Enhancing text presentation on web canvases using Fabric.js involves various techniques, such as adding underlines for improved visual clarity and emphasis. These methods enable developers to customize text elements effectively, contributing to enhanced user experience and design flexibility in web

How to remove underline for anchors tag using CSS?

The anchor tag (<a>) is used to define hyperlinks in HTML, Removing the underline from the anchor (<a>) tags in CSS involves setting the text-decoration property to none. This can be done by targeting the anchor elements with a CSS rule like a { text-decoration: none; }, which removes th

Space between two rows in a table using CSS

The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp

How to create linear gradient text using HTML and CSS ?

The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide

How to Style Text Buttons using CSS?

Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons usi

How to add shadow to text using CSS ?

The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis. Note: We can customize text shadow by changing position, blur, and color for improved appearance and visua