如何在css中显示标题前后的水平线
在CSS中显示标题前后的水平线可以通过伪元素和边框属性来实现。具体步骤如下：
- 创建一个包含标题的HTML元素，例如一个
<h1>标签或者一个带有标题类名的<div>标签。 - 使用CSS选择器选中该标题元素，并为其添加
position: relative;属性，以便后续使用绝对定位。 - 使用伪元素
::before和::after为标题元素添加前后的水平线。例如，可以使用::before为标题前添加水平线，使用::after为标题后添加水平线。 - 为伪元素设置绝对定位，并使用
content属性添加内容，例如一个空字符串""。 - 使用
top属性设置伪元素的垂直位置，例如top: 50%;可以将伪元素垂直居中。 - 使用
left和right属性设置伪元素的水平位置，例如left: 0;和right: 0;可以将伪元素水平拉伸至整个标题元素的宽度。 - 使用
border-bottom属性为伪元素添加水平线样式，例如border-bottom: 1px solid black;可以添加一条黑色的水平线。
以下是一个示例的CSS代码：
h1 {
position: relative;
}
h1::before,
h1::after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-bottom: 1px solid black;
}
h1::before {
margin-top: -1px; /* 调整水平线的位置 */
}
h1::after {
margin-top: 1px; /* 调整水平线的位置 */
}这样，标题前后就会显示一条水平线。你可以根据需要调整水平线的样式、位置和颜色。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
0回答
我试图在css中设置一个html标题的样式，但是没有得到正确的结果，因为我的jsfiddle显示：。下面是html和css代码：
<h2><span>Heading2</span></h2>
h2{
width:100%;
text-align:center;
border-bottom: 1px solid #000;
line-height:0.1em; margin:10px 0 20px;
}
h2 span{
padding:0 10px;
}
如何在标题前后分别放置水平线，同时控制水平线的宽度，使其不
浏览 10提问于2016-07-06得票数 18
回答已采纳
在我的网站导航上，我使用的是bootstrap，对于我的活动页面，我试图在它下面添加一条水平线。
对于导航，Bootstrap已将填充设置为
@media (min-width: 768px)
navbar.less:286
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
我使用边框底部作为下面的水平线来显示活动页面，但我不希望它在页面标题下显示15px。
因此，我在custom.css文件中插入了以下代码：
.activeNavPage {
border-bott
浏览 4提问于2017-05-07得票数 0
我正在使用hexo框架，并尝试在我的.md文件中添加“-”或“*”来显示一条水平线，但它不起作用。
我还尝试在我的_config.yml文件中启用gfm markdown：
标记: gfm: true pedantic: false sanitize: false tables: true breaks: true smartLists: true smartypants: true modifyAnchors：'‘自动链接: true
有什么线索吗？或者有没有办法将HTML标签嵌入到帖子中？
浏览 31提问于2017-06-18得票数 21
我试图弄清楚如何在h1标题的每一边显示一条带有小方格的水平线。这是我想做的事情的一个例子。我发现了一个类似的问题，使用该代码，我可以得到水平线，但不知道如何添加方格。
下面是当前的css。
.h1::before,
.h1::after {
display: inline-block;
content: "";
border-top: .3rem solid black;
width: 4rem;
margin: 0 1rem;
transform: translateY(-0.3rem);
}
<h1 class="h1&#
浏览 2提问于2022-04-05得票数 1
回答已采纳
3回答
在我的应用程序中，我有一个带有标题和水平线的节标题。水平线是父容器的背景图像(它包含行，图像的其余部分是透明的)。标题由子元素定义。
<div class="header">
<span>Identifier</span>
</div>
我试图用CSS样式来实现的是，子元素显示的背景颜色与父元素相同，但是父容器的背景图像不应该显示在标题下面。
.header {
background-image: url("bg_image.png");
background-color: #fff;
浏览 0提问于2014-07-22得票数 1
回答已采纳
我想在两对水平线之间放置一个h3标题，就像这样：
任何人都可以帮助我在html，css中实现这一点。
更新
请让我如何做到这一点，但使用锚标记(实际上是一个按钮)，我希望它是这样的：
浏览 4提问于2013-06-06得票数 2
回答已采纳
我想在副标题h3中显示一条水平线，它延伸到标题文本两侧的post/页面内容区域的边框。
这可以用html吗？
浏览 1提问于2012-04-02得票数 0
1回答
只显示几秒钟的标题
、、、、
左箭头和右箭头+我的网站上的标题- - Fancybox显示60秒，然后消失。例如，我想将其更改为10秒，但我根本找不到jquery.fancybox.min.css中要更改的位置。理想情况下，如果可能的话，我也可以让图像中的水平线不可见。
谢谢你的帮助，
//Johan
浏览 0提问于2018-09-24得票数 1
回答已采纳
1回答
我定义了以下自定义主题：
extends:
- default-with-fallback-font
footer:
recto:
right:
content: '{chapter-title} | *{page-number}*'
verso:
left:
content: '*{page-number}* | {chapter-title}'
header:
height: $base_line_height_length * 4
recto:
center:
content:
浏览 8提问于2022-09-15得票数 0
我正在尝试创建像这样的标题： ? 水平线必须来自视口的左侧，并在标题结束的同一点结束。理想情况下，我希望所有内容都在bootstrap列中。所以我的标记现在看起来是这样的： <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
浏览 92提问于2021-10-05得票数 0
回答已采纳
我试图将100%的水平线(规则)自动放置在
<h1>
使用CSS的标题标记。
我想看到的例子：
-剪短的8< --
引言
-剪短的8< --
我的CSS中有这样的内容：
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
在我的主HTML页面中有这样的内容：
<body class="mypage">
<
浏览 9提问于2013-04-18得票数 20
我想实现这一点
Header --------------------
或
My Header many letters
second line ---------------
我试过这个：
<div class="max-width">
<h5 class="h-line">Horizontal line not displayed when too many letters </h5>
</div>
<div class="max-width">
<h5 class
浏览 4提问于2022-11-20得票数 0
主体背景在内联css中定义为
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
在真实的网站中，最新的Internet在后台显示水平线。
在IE开发工具中，我关闭了所有其他样式，尝试了2色渐变、线性渐变和其他颜色，但问题依然存在。
如何迫使IE显示没有水平线的背景？
铬显示适当的背景。此外，如果只使用此样式，则Internet将显示适当的背景。页面
<html>
<head>
<style type="text/css">
body
浏览 5提问于2014-10-08得票数 0
回答已采纳
2回答
标题两边的水平线造型
、、、
我正在写一个Wordpress博客，我试图弄清楚如何在我的一些标题的两边添加水平线，比如这个链接中的标题：
在上面的博客中，边栏中的标题和“共享这篇文章”标题都有我想要的效果，但似乎不知道如何获得它。我知道HTML和CSS的基本知识，所以这可能是我忽略的东西，或者只是还没有学到的东西。
另外，是否有办法通过CSS添加更多独特类型的行(如长卷曲行)，将这种类型的样式提升到下一个级别？
提前感谢！
浏览 13提问于2015-06-24得票数 3
回答已采纳
我正在为我的站点开发一个简单的不透明滑块，我遇到了一个奇怪的呈现错误(?)这只发生在火狐(Chrome和Opera完美地处理它)。
问题是，当幻灯片互相改变时，它们上方出现了一条水平线：
显然，它与切换图像的箭头有关。如果我将display: none设置为它们，就不会出现任何行。
箭头是跨范围的简单的> <，它们有文本阴影。如果我从它们中移除文本阴影，线就会变薄：
带有箭头的跨度绝对位于div内，每个div占幻灯片容器的一半。这些div位于另一个div中，它与幻灯片有兄弟关系，并且有z-index:1在它们之上。如果我为跨度设置了右/左的位置，所以它们
浏览 4提问于2017-10-15得票数 0
回答已采纳
嗯，我正试图在我的图表(网格)中添加那些辅助垂直和水平线，但我不确定这是一个高图表特性，还是也可以用GWTHighchart制作。P.S.：这张照片是从一个问题(不是我的问题)在这里张贴在这里，但它显示了我想做什么。
浏览 0提问于2013-08-08得票数 1
回答已采纳
1回答
我在调整网页上的元素大小时遇到了问题。我已经从一些json-data动态创建了一个表。我有一个函数，当窗口滚动过去时，它会将一个表头固定在页面的顶部：
var header = $("#dataheader").offset();
$(window).scroll(function() {
if($(window).scrollTop() > header.top){
$("#dataheader").css('top','0').css('background-color',white)
} el
浏览 0提问于2016-12-07得票数 0
我到处都找过了！我想在页面上显示3-4水平线相关的产品。现在，由于我将其从右侧边栏移动到内容区域，它们在垂直线中处于默认状态。它在水平方向上看起来很棒，访问者不必滚动页面就能找到他们喜欢的产品。
另外，如何将区块标题“相关产品”更改为类似“我们也可以推荐：”之类的内容？
浏览 2提问于2010-12-14得票数 0
1回答
我试图在这个登录表单中添加一条与单词“或”对齐的水平线，但是我无法让它工作，因为它只是在单词下面对齐。
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body,
html {
width: 100%;
height: 100%;
font-family: 'Lato', Arial, sans-serif;
}
#loginForm {
display: flex;
flex-direction: column;
justify-content: center;
align
浏览 3提问于2017-10-07得票数 2
回答已采纳
1回答
因此，我正在创建一个图像放置在标题区域。除了只显示1/4的图像之外，一切都正常吗？
我的图像实际上是文本，一个图像组合在一个图像EX: JKTeater <-图标中，所以现在只有JKT显示在标题区域
下面是create()方法
public void create() {
super.create();
setTitle("JKTeater Application");
setMessage("Hello World");
if (image != null) setTitleImage(image);
}
标题区号允许的特定大小吗？
浏览 2提问于2012-10-19得票数 5
回答已采纳
3回答
我正试着在图像上画一条短的水平线。例如，引号后面跟着水平线，后面跟着作者姓名。下面是我想要做的一个例子。 ? 我如何在html css中实现这一点？
浏览 22提问于2019-01-06得票数 0
3回答
在我的html页面中，我有带有css的div：
padding: 0px;
color: rgb(51, 51, 51);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
position: relative;
overflow: visible;
在这个div中，我有表单和水平线：
<hr color="#424242" size="2">
如何将此行添加到form之后？他的例子在较大的显示器上工作，但当我看到电话线上的页面在div旁边时
浏览 2提问于2012-06-27得票数 0
回答已采纳
在我的应用程序中使用运行在react-native-ui-kitten上的BottomNavigation和BottomNavigationTab组件(Expov2.21.2，react-native v0.57.1 )，当前选定的BottomNavigationTab顶部有一条水平线，其中包含标题和图标。
来自我的应用程序的：
测试B选项卡被选中，图标上方有多余的水平线。
文档中的：
显示，当定义了标题和图标时，所选选项卡上没有水平线。但对我来说不是这样。
问题：如何去除水平线？
我的代码：
import { View } from 'react-native&#
浏览 0提问于2019-07-17得票数 3
回答已采纳
4回答
我正在制作一个react应用程序，我必须在表头行之前和之后添加一条全宽水平线，我如何在这里添加它？
return (
<div>
<table width="100%">
<tr>
<th>Name</th>
<th>Id</th>
<th>Age</th>
<th>Status</th>
<th>Se
浏览 78提问于2021-06-11得票数 1
我只是集成了自定义wordpress菜单，菜单显示在顶部，在那里我想要显示，但我有问题的结盟它内联。我以这种方式将菜单从主题插入到header.php文件中：
<?wp_nav_menu( array( 'theme_location' => 'top-menu', 'container_class' => 'top_menu_class' ) ); ?>
菜单名为top-menu，其显示在顶部，但以水平线显示。我想像主菜单一样垂直。因为菜单中有类选择器，所以我尝试将CSS规则分配给CSS类，但似乎不更改它
浏览 1提问于2018-05-31得票数 0
回答已采纳
3回答
我尝试使用bootswrap listbox显示没有水平线的列表框。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-group">
<li class=
浏览 0提问于2016-11-09得票数 0
我有一个RMarkdown文件：
---
title: "Analysis"
author: "Me"
date: "`r Sys.Date()`"
output:
html_document:
toc: true
---
---
## Summary {.tabset .tabset-fade}
### Total {.tabset .tabset-dropdown}
#### h1
plot1
#### h2
plot2
### Approved {.tabset .tabset-dropdown}
#### h1
浏览 15提问于2020-06-04得票数 0
如何调整这个？我试图在我的应用程序中做一个导航抽屉，我设法在项目之间添加了水平线，但我想调整图标和标题之间的空间。
浏览 1提问于2018-07-21得票数 2
1回答
标题不是很有描述性，但基本上我想用HTML和CSS创建类似这样的东西：
我可以通过在div中包装第一行框并将其背景图像设置为这行来绘制水平线，但我不确定如何对框的列进行分组并在其后面添加一条垂直线。
如有任何帮助，我们不胜感激！
浏览 0提问于2014-10-01得票数 0
我想把标题和按钮放在同一条水平线上，但放在页面的相对两侧(左和右)。我使用的是Twitter引导程序，所以我将它们放在一个.row中，然后指定它们都是.col.sm-6。我把按钮放在div中，这样我就可以用文本对齐将它移到列的右边。
我怎么能让那个按钮在手机上自动中心呢？当窗口变小，第二列跳到第一列下时，按钮仍然对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class=&
浏览 1提问于2014-11-04得票数 0
回答已采纳
1回答
我的reactJS应用程序中有一个使用d3和svg的散点图。我需要在标签下面的y轴上显示水平线。目前，水平线出现在标签旁边。
这是我的密码：
const yAxis = d3.axisLeft(yScale).tickFormat(function(d) {
if (d != minYFloor)
return d + " yds";
else return "";
})
.tickSize(-width - 20, 0, 0);
上面代码中的tickSize函数在图形中呈现水平线，如下所示：
这是我的css：
.axisY line
浏览 0提问于2018-06-11得票数 1
回答已采纳
下图显示了通过调用DialogFragment的show()方法生成的对话框。我通过调用getDialog()方法，然后调用setTitle()方法来设置标题。我想改变标题的颜色和它下面的水平线。如何做到这一点？
浏览 0提问于2014-04-30得票数 0
我在显示数据库中的所有记录时遇到了问题...我有数据库'library‘和表’book‘。'members‘的结构: id，标题，描述，作者，出版商，yearPublished。
下面是我的java代码方法：
public static void preuzmi() throws ClassNotFoundException, InstantiationException, SQLException, IllegalAccessException{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Con
浏览 2提问于2013-09-20得票数 1
回答已采纳
3回答
我在一些CSS上工作，其中的设计要求页面标题(标题)与垂直居中的水平线两边居中。此外，页面上有一个背景图像，因此标题的背景需要是透明的。
我已经将标题居中，我可以使用伪类来创建行。但我需要这条线在穿过标题的文本时消失。
我考虑使用背景渐变，使文字的位置变得透明，但由于每个标题可能有不同的长度，我不知道在哪里停止。
以下是到目前为止的CSS：
h1 {
text-align: center;
position: relative;
font-size: 30px;
z-index: 1;
}
h1:after {
conten
浏览 1提问于2013-03-22得票数 57
回答已采纳
有没有办法在不使用<hr>的情况下在每个标题后面添加一条水平线？我只想在<style> </style>中添加一些东西
浏览 27提问于2020-01-14得票数 0
回答已采纳
我有以下情况：
<html>
<head>
<title>
Title
</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#thingy {
position: absolute;
top: 20px;
background-image: url("bg.png");
width:
浏览 0提问于2012-03-27得票数 2
回答已采纳
2回答
水头右侧的水平线
、、
我正在我的网站上工作，我希望在页面标题的右侧有一条水平线。目前，这是我的标题的代码，剥离css。
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align
浏览 4提问于2013-12-01得票数 0
回答已采纳
我想创建的标题，有一条水平线通过他们与标题文本出现在线上，即使我相信我已经正确地使用了z索引规则，它仍然不起作用，这是我正在使用的css；
.heading {
border-bottom: 2px solid #222222!important;
text-align: center;
z-index: -1;
}
#sidebar .widget h3, #sidebar .widget .heading h3 {
color: #333333;
text-align: center;
z-index: 10;
margin-bottom: -8px;
position: relativ
浏览 2提问于2014-08-15得票数 0
我想复制下面菜单的外观，在弹出按钮的菜单中命名为“区段”。
我可以看出灰色的水平线是NSMenuItem.separator()，但是在这些线上设置标题和属性标题是行不通的。添加子菜单对我毫无帮助，添加禁用的菜单项也是如此。这似乎是一种常见的模式，我很难相信它只是随处可见的属性字符串/自定义视图。
浏览 0提问于2018-10-10得票数 1
回答已采纳
2回答
我创建了一个包含用于搜索目的的材料输入的应用程序。当搜索正在进行时，我希望输入字段的水平线有进度指示符。我的想法是显示和隐藏progressBar与*ngIf，并移动它与css，以匹配te输入的水平线高度。以下是代码：
<mat-form-field>
<mat-label>Search</mat-label>
<input matInput (input)="onSearchChange($event.target.value)">
<mat-progress-bar *ngIf="searchD
浏览 0提问于2021-01-26得票数 0
回答已采纳
2回答
在wiki中，您只需在输入的文本中添加“-”即可添加水平线。我就是找不到控制它的CSS部分。(不，不是"hr")
浏览 0提问于2009-10-02得票数 1
回答已采纳
在我正在制作的应用程序中，我需要在我使用文本发布的每一条消息中显示一个签名，我尝试使用以下代码附加一些文本，但没有成功，我尝试使用css伪元素after。
这是我的文本区域和css代码。
<textarea id="#le_message_compose" placeholder="type your message here"></textarea>
#le_message_compose:after {
color: #708090;
content:'this is my text' !i
浏览 6提问于2014-08-31得票数 0
回答已采纳
我想显示该网站的背景图像，它是由管理员设置的，来自数据库中的滑块表，但是当我在CSS代码中调用它时，该图像不会显示。
但是，如果我在<img src=""> 标签中调用它，那么它就会工作。
PHP代码
@php
$sliders = App\Models\Slider::find(1);
@endphp
CSS叶片代码
.page-header {
background-image: url ({{ asset($sliders->slider_img) }});
position: relative;
}
浏览 2提问于2021-09-20得票数 0
1回答
我在让ngClass更新我的视图时遇到了一些困难，即使后端正在正确更新。我的控制器如下：
@Component({
selector: 'show-hide-table',
template: '
<table>
<thead>
<tr>
<th (click)="toggleHidden()">
<div>Show/Hide</div>
浏览 0提问于2017-05-02得票数 0
3回答
我尝试使用CSS更改<hr>标记：
hr { color:whitesmoke}
但它根本不影响我的HTML。是否有方法将水平线的颜色更改为与使用CSS的默认颜色不同的颜色？出于性能考虑，我不想使用img (在我想用max-width: 100%的颜色中的水平线)，但是使用一些CSS规则。
浏览 3提问于2017-08-14得票数 1
回答已采纳
1回答
我正在使用适用于LaTeX的Lyx文档处理器。
我需要使用段落环境(因为我有Subsubsubsections)，并且我希望段落出现在目录中。
通过更改文档设置，我设法使段落显示在目录中。但是，紧跟在标题后面的文本不会从新行开始。
我通过插入ERT (LaTeX代码) \newline修复了这个问题。
但是，现在我遇到了一个问题，因为目录中段落的页码也显示在下一行！(而不是在页面的右侧，在其他页码下。)
那么，如何在不影响TOC的情况下，让段落正文从新行开始？
谢谢。
浏览 2提问于2012-05-12得票数 4
回答已采纳
使用chartjs，我想绘制一条水平线和一条垂直线，它们从雷达图的中心延伸，并在如下所示的线条上显示自定义标题，有人可以指导我吗？ ?
浏览 25提问于2019-09-14得票数 0
1回答
<html>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="main">
<span id="turn">X first</span>
浏览 42提问于2018-06-04得票数 -2
回答已采纳
云服务器
ICP备案
实时音视频
云直播
即时通信 IM
腾讯云开发者
