jquery 如何在css中显示标题前后的水平线

7bsow1i6 于 2023-11-17 发布在 jQuery

关注(0)|答案(3)|浏览(128)

我试图在css中设计一个html标题，但没有得到正确的结果，因为我的jsfiddle显示：https://jsfiddle.net/Nadjanara/nmo0245t/。以下是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; 
}

字符串
我怎样才能把水平线只放在标题的前后，同时控制线的宽度，使其不占据屏幕的整个宽度？

jquery

来源：https://stackoverflow.com/questions/38212963/how-to-display-a-horizontal-line-before-and-after-a-heading-in-css

3条答案

按热度按时间

bttbmeg01#

显然有很多方法可以实现你所追求的目标，但是像this这样的方法怎么样？

h1 {
    font-size: 4rem;
}
h1::before,
h1::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid black;
    width: 4rem;
    margin: 0 1rem;
    transform: translateY(-1rem);
}

个字符

赞(0）回复(0）举报 2023-11-17

ubbxdtey2#

给予这个机会！pseduo-element将是你最好的选择，你可以根据需要改变线条的宽度，但是在这个例子中我使用了500 px。

h2{ 
  text-align:center;
  line-height:0.1em;
  position:relative;
  margin:10px 0 20px; 
  background:#FFF;
} 
h2 span{
   background:#FFF;
   z-index:2;
   position: relative;
}
h2:before{
  content:'';
  position:absolute;
  display:block;
  top:50%;
  height:1px;
  width: 500px;
  background:#000;
  left:50%;
  z-index:1;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}

字符串

赞(0）回复(0）举报 2023-11-17

p5fdfcr13#

下面的代码运行得很好。

.divider-text {
  position: relative;
  text-align: center;
}

.divider-text:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #ccc;
}

.divider-text span {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  z-index: 9;
}

个字符

赞(0）回复(0）举报 2023-11-17

我来回答

jquery 如何在css中显示标题前后的水平线

3条答案

相关问题

热门标签

最新问答