两个单词之间的水平线答案

【问题标题】：Horizontal line between two words两个单词之间的水平线
【发布时间】：2017-11-23 04:12:03
【问题描述】：

如何使用 css 在这两个单词之间添加一条线：

Last Action Items------------------------------查看更多----

没有“-”

我这样做了：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;
  }
}

【问题讨论】：

你不能只用 CSS 在两个单词之间添加一条线。 CSS 的目的是为您的页面设置样式，而不是在某些元素之间动态添加某些内容。你有javascript。而如果你想默认添加一条水平线，你可以使用：LastActionItems
在你的html代码中查看更多。
是的，在构建 HTML 时，只需在您的单词之间添加
......或者如果出于某种原因不适合您的需求，您可以添加任意数量'--- 是您在构建 HTML 时想要的单词之间的内容。
你的 html 结构是什么样的？
也许css text-decoration strikethrough 有不间断的空格？
类似的东西 --> jsfiddle.net/3L766kdo/2 ?

标签： html css css-position line

【解决方案1】：

下面嵌入的代码片段中演示的解决方案利用现有元素，无需进一步添加或调整 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>

JSFiddle Demonstration

【讨论】：

【解决方案2】：

也许使用文本装饰：

Last Action Items&lt;span style="text-decoration: line-through"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;View more&lt;span style="text-decoration: line-through"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;

或使用inline-block

Last Action Items&lt;span style="display:inline-block; width:100px; border-bottom: 1px solid black; line-height:0"&gt;&amp;nbsp;&lt;/span&gt;View more

【讨论】：

【解决方案3】：

这是@RobAu 他的第二个解决方案的更简洁的版本。它应该可以工作。

span {
  display:inline-block;
  border-bottom: 1px solid black;
  line-height:0
}

Last Action Items&lt;span style="width: 100px"&gt;&amp;nbsp;&lt;/span&gt;View more&lt;span style="width: 50px"&gt;&amp;nbsp;&lt;/span&gt;

【讨论】：