两个词之间的水平线 [英] Horizontal line between two words

问题描述

如何使用CSS在这两个单词之间添加一行:

How can I add a line between this two words with css:

最后行动项目------------------------------查看更多----

Last Action Items------------------------------View more----

没有-"

我这样做: https://jsfiddle.net/3L766kdo/1/但我认为有更好的方法(用围绕查看更多"的线)

I did this: https://jsfiddle.net/3L766kdo/1/ but I think there is a better way to do it (with the line surrounding View More)

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结构进行进一步的添加或调整.

The solution demonstrated in the Code Snippet embedded below utilizes existing elements with no further additions or adjustments to the DOM, or html structure.

绝对位置为 pseudo-element 的 用作所需的水平线，从而产生了预期的行为.

An absolutely positioned pseudo-element is used to function as the required horizontal line resulting in the intended behaviour.

代码段演示:

.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>

JSFiddle演示

这篇关于两个词之间的水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！