This question already has answers here:
CSS technique for a horizontal line with words in the middle
                                
                                    (22个答案)
                                
                        
                                8天前关闭。
            
                    
我有一个标题,我想在此标题的左侧和右侧放置一条水平虚线,如您在jsfiddle中所见

https://jsfiddle.net/uLake5g3/9/

这是我的HTML:

<div class = "spotlight">
  <div class = "container spotlight__main">
    <h2><span class  ="background__red">In the spotlight</span></h2>
  </div>
</div>


这是我的CSS:

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

h2 > span:before,
h2 > span:after {
  content: "";
  position: absolute;
  top: 50%;
  border-bottom: 1px dashed;
  width: 96rem;
  margin: 0 auto;
  vertical-align: center;
}

h2 > span:before {
  right: 100%;
}

h2 > span:after {
  left: 100%;
}


我想在Spotlight_main的边框内添加虚线,但是它们正在外面。

最佳答案

您可以将overflow: hidden;添加到容器中。

我在这里添加了一些其他规则,以使破折号不会超出容器。



.container {
  overflow: hidden;
  width: 400px;
  margin: auto;
  text-align: center;
}

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

h2>span:before,
h2>span:after {
  content: "";
  position: absolute;
  top: 50%;
  border-bottom: 1px dashed;
  width: 96rem;
  margin: 0 auto;
  vertical-align: center;
}

h2>span:before {
  right: 100%;
}

h2>span:after {
  left: 100%;
}

<div class="spotlight">
  <div class="container spotlight__main">
    <h2><span class="background__red">In the spotlight</span></h2>
  </div>
</div>

关于html - 内容的左侧和右侧的水平线为特定宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59684367/

10-12 00:06
查看更多