h标签怎么用

未希 • 2023-12-10 06:29 • 技术教程 • 阅读 108

【h3标签怎么去点】

在HTML中，h3标签是一个标题标签，用于表示文档中的三级标题，通常情况下，我们不需要去除h3标签上的点，因为它们是用来标识标题级别的，有时候我们可能需要调整标题的样式，例如去掉点或者将点变成其他形状，本文将介绍两种方法来实现这个需求。

方法一：使用CSS伪元素

1、我们需要为h3标签添加一个类名，例如：class="no-dot-title"。

2、然后，在CSS中定义这个类名的样式，使用伪元素::before来覆盖点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .no-dot-title::before {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid black;
            position: absolute;
            z-index: -1;
        }
    </style>
</head>
<body>
    <h3 class="no-dot-title">这是一个没有点的标题</h3>
</body>
</html>

方法二：使用CSS伪元素和负边距

1、为h3标签添加一个类名，例如：class="no-dot-title"。

2、在CSS中定义这个类名的样式，使用负边距将点移到标题内部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .no-dot-title {
            position: relative;
            padding-left: 0;
        }
        .no-dot-title::after {
            content: "";
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: black;
            position: absolute;
            left: -10px;
        }
    </style>
</head>
<body>
    <h3 class="no-dot-title">这是一个没有点的标题</h3>
</body>
</html>

h标签怎么用

相关推荐

发表回复