Html 标题之间和之后的 Hr 线

.decorated{
    overflow: hidden;
  text-align: center;
}
.decorated > span{
   position: relative;
   display: inline-block;
}
.decorated > span:before, .decorated > span:after{
   content: '';
   position: absolute;
   top: 50%;
   border-bottom: 2px solid;
   width: 591px; /* half of limiter*/
   margin: 0 20px;
}
.decorated > span:before{
   right: 100%;
}
.decorated > span:after{
   left: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="decorated"><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

* {
  margin: 0;
}

.decorated {
  text-align: center;
}

.decorated>span {
  position: relative;
  display: inline-block;
}

.decorated>span:before,
.decorated>span:after {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 2px solid;
  width: 100vw;
  /* margin: 0 20px; */
}

.decorated>span:before {
  right: calc(100% + 20px);
}

.decorated>span:after {
  left: calc(100% + 20px);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="col-md">
    <div class="">
      <div class="container">
        <h1 class="decorated"><span>My Title</span></h1>
      </div>
    </div>
  </div>
</div>

Html相关问答推荐

如何只混合部分的背景而不是内容<>

Select 包含iframe的图形<><>

在浮动元素旁边垂直居中

如何使用css实现悬停时的动画zoom ？

在 bootstrap 中的弹性项之间添加连接行

首字下沉非字母字符

如何在一行文本溢出省略号后显示文本？

在弹性框布局中的第n个元素后强制换行

是否可以制作响应式 CSS 剪辑路径？

我真的需要一个容器来让行和列正常工作吗？ ( bootstrap 程序 v5)

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

Bootstrap 轮播内容在箭头之间不显示

如何配置 prettier 使其以 Vue.js 模板语法的特定方式运行？

在shiny 的应用程序中使用图标功能时出错

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

在包含 html 标签的字符串的子字符串中应用不同的样式

在身体外部创建 tanget 45° div

提交前的验证表单未显示任何验证消息？

如何通过可见文本使用 Selenium 定位元素

在 html 邮箱的左侧和右侧制作多个元素很热门吗？