Question

我正在尝试在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; 
}

如何仅在标题前后放置水平线，并控制线条的宽度，使其不占据屏幕的整个宽度？

Answer 1

很明显，有很多方法可以实现你所追求的目标。但是像this这样的东西呢？

＆＃13;

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);
}

＆＃13;

<h1>Heading</h1>

＆＃13;

Answer 2

给它一个机会！一个pseduo元素将是你最好的选择。您可以将线条的宽度更改为您需要的宽度，但对于此示例，我使用了500px。

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%);
}

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

2 个答案: