How to set css underline? Introduction to how to set text underline in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set css underline? Introduction to how to set text underline in css

不言

Oct 27, 2018 am 11:16 AM

By default, text fonts on web pages do not have an underline style, but sometimes we will see an underline under text that is not a link on a web page. So how is this underline style implemented? This article will introduce to you how to set text underline in CSS. Next, let’s take a look at the specific content.

There is a text-decoration attribute in css. This attribute is used to implement text underline. The code to implement text underline is also very simple.

The code for text-decoration attribute to implement text underline is as follows :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div>php中文网文字加下划线</div>
</body>
</html>

The effect of setting text underline in css is as follows:

How to set css underline? Introduction to how to set text underline in css

Isn’t the above method very simple? You only need to give the text a style to add an underline. In fact, there is another way to underline text in CSS, which is to use the border attribute of CSS. Let’s take a closer look at how the border attribute in CSS can underline text.

The border attribute can be used to achieve the text underline effect through the lower border border-bottom. Let’s take a closer look at the code to achieve text underline

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            border-bottom: 1px solid pink;
        }
        
    </style>
</head>
<body>
<span>中文网文字下划线</span>
</body>
</html>

The text underline effect is as follows:

How to set css underline? Introduction to how to set text underline in css

If you want to change the text underline to a dotted line, you only need to change the solid in the above code to dashed or dotted.

Finally, as to why span is used instead of div in the above code, it is because the div tag occupies one line, and the span tag occupies as much space as the content is wide, so it is relatively simple to use the span tag. .

The above is the detailed content of How to set css underline? Introduction to how to set text underline in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties