在 CSS 中将标题放在 2 条水平线内

2024-01-09

I want to put an h3 heading between 2 pairs of horizontal line just like that : enter image description here

任何人都可以帮助我实现这个想法 在 html,css 中


UPDATE

请问我该如何做到这一点,但有一个锚标签(实际上是一个按钮) 我希望它是这样的:


您可以设置伪元素的样式,如下所示:http://jsbin.com/epeceb/1/ http://jsbin.com/epeceb/1/

CSS

h3 {
  width: 500px;
  font: 30px Arial;
  font-weight: normal; 
  text-align: right;
  position: relative;
}

h3 span {
  background: #fff; 
  margin-right: 15%;
  padding: 0 20px;
}

h3:before {
  content: "";
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: -4px;
  position: absolute;
  z-index: -1;
  height: 0;
  border-top: 8px double red;
}

截屏

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 CSS 中将标题放在 2 条水平线内 的相关文章

  • 如何重置弹性项目的“显示”属性

    我试图通过保留旧浏览器 特别是 IE8 IE9 和 Opera 10 的表格 将基于表格和 JS 的旧布局转换为具有向后兼容性的新 Flexbox 问题是没有display flex item覆盖旧样式display table cell
  • 缩小 HTML、CSS 和 Javascript 是一个坏主意吗?

    维基百科定义缩小 http en wikipedia org wiki Minification 28programming 29 as 从源代码中删除所有不必要的字符而不改变其功能的过程 这些不必要的字符通常包括空格字符 换行符 注释 有
  • 如何将 em 标签重新设置为粗体而不是斜体

    我想让文本在 em 标记粗体而不是斜体 有没有办法用 CSS 来实现这一点 当然 使用以下 CSS 代码 em font weight bold font style normal em
  • 创建全屏 iframe

    我目前正在研究 XSS 攻击 目的是在客户端演示中使用它们 我是渗透测试员 我编写了一个工具 该工具将托管网站登录页面的恶意版本 获取用户名和密码 然后将受害者重定向回原始网站 然而 我一直在尝试使用 iframe 来让它工作 因为它看起来
  • 强制浏览器重新加载index.htm

    通过在浏览器地址字段中输入 URL www mydomain com index htm 或仅 www mydomain com 并按 Enter 键 如何强制浏览器在加载页面时始终加载最新版本的 index htm 我正在 Chrome
  • 图表.js.如何更改“标签”数组的字体样式?

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML
  • 如何在浏览器上使用样式组件 CDN 构建?

    索引 html 我从以下位置获取 CDN 文件 我怎样才能访问styled功能 const styled window styled components不起作用 对于版本 5 如docs https styled components c
  • 将多个 CSS 文件连接成一个

    将多个 CSS 文件连接成一个 CSS 文件的最佳方法是什么 我想减少以下 进入 简单地做cat css css gt css 1 3
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • Bootstrap Grid System 新线看起来不太好

    最近 我开始在我的网站上制作一个管理页面来编辑多个小表 1 5 个条目 它们全部显示在一页上 并且表格嵌套在 div 中 如下所示 div class row div class col xs 12 col sm 4 col md 4 di
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 为什么我无法对自定义属性(又名 CSS 变量)进行动画处理?

    看这个动画 金色 div 有一个自定义属性动画的动画 keyframes roll o 1动画 o 这是分步动画的 银色 div 有一个动画 其中normal属性是动画的 keyframes roll o 2动画left 这会持续动画 为什
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • 如果超过高度则动态浮动柱

    I ve got a questing concerning a dynamic floating layout of li s in a ul Container 灰色容器 ul 固定高度为 150px 所有 li 其中的应使用最大高度
  • 浮动CSS属性导致父div不继承高度?

    我在 div 中有一个元素设置为float right但是 它会导致最外面的 div 不环绕 这是jsfiddle http jsfiddle net W792X 5 for it 我试图让提交按钮在 div 内浮动 但设置该属性似乎会导致
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 在什么情况下,使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢?

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更
  • 如何使用 Django (Python) 登录表单?

    我在 Django 中构建了一个登录表单 现在我遇到了路由问题 当我选择登录按钮时 表单不会发送正确的遮阳篷 我认为前端的表单无法从 查看 py 文件 所以它不会发送任何 awnser 并且登录过程无法工作 该表单是一个简单的静态 html
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf

随机推荐

  • WPF Ribbon - 隐藏快速访问工具栏

    如何在 WPF 功能区中隐藏快速访问工具栏 For 您可以使用隐藏它VisualTreeHelper 上Loaded事件处理程序 只需将包含快速访问工具栏的行大小调整为 0 private void RibbonLoaded object
  • 安卓L | libusb_init 返回 LIBUSB_ERROR_OTHER (-99)

    我尝试使用libusb在未 root 的 Nexus 5 上 如建议的那样这种方法 https stackoverflow com a 24243605 902217 通过将 USB 文件描述符从 java 传输到本机端 我的应用程序通过以
  • 将空图添加到ggplot2中的facet_wrap

    我正在尝试创建 3 个图 其中所有面板应具有相同的大小 所以我认为解决方案可能是facet wrap 我的问题是 我不希望每个图表中有相同数量的图表 df lt data frame group c 1 1 2 2 2 3 3 name c
  • 在树枝模板中设置多维数组中单个对象的值

    对于项目需要 我需要在渲染之前更改一些表单字段数据 为此 我迭代表单元素并动态更改我需要的值 问题是我无法改变价值 我收到这个错误 Unexpected token punctuation of value end of statement
  • Emacs 搜索和替换的好教程 + 参考吗? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 对于 Emacs 的新用户来说 有什么好的教程 参考来学习和熟悉 Emacs 的搜索 替换和正则表达式功能吗 In Emacs press
  • 动态生成的 Perl Moose 访问器

    请参阅以下基于 Moose 的 Perl 代码片段 BusinessClass gt meta gt add attribute Key gt is gt rorw isa gt MooseType lazy gt 0 required g
  • C语言中如何连接两个整数

    Stack Overflow 用许多其他语言回答了这个问题 但没有用 C 语言回答 所以我想我会问 因为我有同样的问题 C语言中如何连接两个整数 Example x 11 y 11 我想要 z 如下 z 1111 其他示例尝试使用字符串来执
  • N层架构中如何维护事务

    我正在 N 层架构中开发应用程序 众所周知 我们需要在插入 更新 删除操作时实现事务 请告诉我如何在 N 层架构的 c net 中使用事务 我的架构是这样的 Applicationform gt middle Layre gt Factor
  • simple_form 带有自定义包装器的自定义输入

    我正在尝试在我的应用程序中为货币进行自定义输入 我有那些 bootstrap 包装器等 我认为它带有 simple form 或 bootstrap gem 所以 我可以做类似的事情 它的工作原理正如预期的那样 问题是 我在很多地方都需要同
  • 登录框架

    想象一下有一个框架提供了一个名为logutils set up 它根据某些配置设置日志记录 应尽早设置日志记录 因为导入库期间发出的警告不应丢失 由于旧方法 if name main 看起来很难看 我们使用控制台脚本入口点来注册main m
  • 添加一些内容后的 VB.Net 双重比较

    在向双变量添加一些值后 我遇到了一个奇怪的情况 当将 0 2 多次添加到双精度变量时会出现问题 我认为这只发生在 0 2 例如 考虑以下代码 Dim i As Double 2 i i 0 2 MsgBox i 2 2 MsgBox i g
  • VS2010添加新文件抛出设置属性'System.Windows.ResourceDictionary.DeferrableContent'抛出异常

    在 Visual Studio 2010 中 当我右键单击一个项目并选择 添加新项目 时 光标闪烁一秒钟 但没有任何反应 如果我去文件 gt 新建 gt 文件 我得到 设置属性 System Windows ResourceDictiona
  • IgnoreReadOnlyRecommended 打开 Excel 工作簿时无法从 Python 运行

    我有一个 Excel 工作簿 需要以可写模式从 python 打开 工作簿设置为提示只读推荐 https support office com en us article Prompt to open a Microsoft Office
  • 条码扫描仪读取代码速度太慢

    我使用 codenameone codescanner 库来读取条形码 它使用第三方扫描仪 如果单独使用 则可以正常工作并且可以快速读取条形码 但是使用codenameone应用程序 同样的扫描仪速度太慢 大多数时候无法扫描 我已经在三星设
  • 使用 iTextSharp 在 PdfPCell 中自动调整图像大小

    我在 iTextSharp 库中的图像遇到一个奇怪的问题 我将图像添加到 PdfPCell 中 由于某种原因它被放大了 我怎样才能保持原来的大小 我虽然打印时图像是相同的 但图片上的差异在打印版本上是相同的 必须使用 ScaleXXX 手动
  • Silverlight NavigationService 始终为空

    我读到有些人遇到了这个问题 所以我想发布一个我在尝试处理这个问题时想到的 有点 优雅的解决方案 问题是当您在 Silverlight 中创建模板化页面时 ContentControls 没有父 Frame 的 NavigationServi
  • 单击时引导按钮显示蓝色轮廓

    我添加了这个 但单击按钮时仍然会出现蓝色轮廓 btn focus outline none 怎么去掉那个丑陋的东西 可能您的属性正在被覆盖 尝试附加 important与 active 一起添加到您的代码中 btn focus btn ac
  • 处理 .NET IDisposable 对象

    我用 C 工作 而且我对使用相当松懈using块来声明实现的对象IDisposable 显然你总是应该这样做 然而 我没有找到一种简单的方法来知道我何时犯了错误 Visual Studio 似乎没有以任何方式表明这一点 我只是错过了什么吗
  • Airflow 能否持续访问短期动态生成任务的元数据?

    我有一个 DAG 每当检测到文件时FileSensor 为每个文件生成任务以 1 将文件移动到暂存区域 2 触发单独的 DAG 来处理文件 FileSensor gt Move File1 gt TriggerDAG File1 gt Do
  • 在 CSS 中将标题放在 2 条水平线内

    I want to put an h3 heading between 2 pairs of horizontal line just like that 任何人都可以帮助我实现这个想法 在 html css 中 UPDATE 请问我该如何