如何使用 css 在这两个词之间添加一行:
最后的行动元素----------------------------查看更多----
没有“-”
我这样做了:https://jsfiddle.net/3L766kdo/1/但我认为有更好的方法来做到这一点(用线包围查看更多)
HTML
<div class='container c-decorated-header'>
<h3><span>Last Action items</span></h3>
<div class='c-decorated-header_link-view-more'>
<a href="www.something.com">View More</a>
</div>
<div>
SCSS
.c-decorated-header {
position: relative;
h3 {
position: relative;
color: #7B8291;
width: 79%;
text-align: left;
border-bottom: 1px solid #e2e2e6;
line-height: 0.1em;
margin: 35px 0 0px;
}
h3 span {
position: relative;
font-size: .6em;
font-weight: 600;
font-stretch: condensed;
background: #f5f4f4;
}
&_link-view-more {
position: absolute;
width: 96%;
text-align: right;
top: -5px;
padding-right: 40px;
font-size: 14px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
color: rgb(87, 135, 253);
text-decoration: none;
text-align: right;
}
}
最佳答案
下面嵌入的代码片段中演示的解决方案利用现有元素,没有进一步添加或调整 DOM 或 html 结构。
绝对 定位的伪元素 用作所需的水平线,从而产生预期的行为。
代码片段演示:
.c-decorated-header {
position: relative;
}
.c-decorated-header h3 {
position: relative;
color: #7B8291;
text-align: left;
}
.c-decorated-header h3:after {
content: "";
height: 1px;
position: absolute;
right: 0;
left: 100px;
top: 0;
bottom: 0;
margin: auto;
background: #e2e2e6;
}
.c-decorated-header h3 span {
position: relative;
font-size: .6em;
font-weight: 600;
font-stretch: condensed;
background: #f5f4f4;
}
.c-decorated-header_link-view-more {
position: absolute;
top: -5px;
right: 40px;
font-size: 14px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
color: #5787fd;
text-decoration: none;
background: white;
padding: 5px;
}
<div class='container c-decorated-header'>
<h3><span>Last Action items</span></h3>
<div class='c-decorated-header_link-view-more'>
<a href="www.something.com">View More</a>
</div>
<div>
关于html - 两个单词之间的水平线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47439712/