html - 特定宽度的内容左侧和右侧的水平线
问题描述
我有一个标题,我想在这个标题的左侧和右侧放置一条水平虚线,正如您在 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 他的边界内有虚线,但它们在外面。
解决方案
你可以试试:
h2:before{
border-bottom: 1px dashed;
color: #fff;
content: "";
left:0;
position: absolute;
right:0;
top: 50%;
}
推荐阅读
- c# - 使用 C# 中的 Linq 检查 Selenium 中的元素计数是否>0
- asp.net - 如何将 DotNetNuke 的内置会话和 Cookie 用于我自己的登录模块?
- javascript - 离线访问 Analytics Reporting API
- java - 评估领域特定表达的搜索方法
- yaml - 在 jinja2 模板中使用 set 命令进行变量替换时的问题
- angular - 升级我的角度应用程序后,我遇到了一个有点奇怪的问题。与RouterScroller关联
- asp.net-core - EF Core 一对一关系不返回结果中的数据
- jquery - 淘汰赛:使用动态键在 ko 可观察数组中推送值
- deeplearning4j - CSVSequenceRecordReader 是否为训练 LSTM 网络创建兼容数据集?
- php - REST API - MALFORMED_REQUEST 问题