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:
这是我的CSS:
我想在Spotlight_main的边框内添加虚线,但是它们正在外面。
(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/