两个词之间的水平线

Question

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

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

Without the "-"

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;
  }
}

Answer 1

Maybe using text-decoration:

 Last Action Items<span style="text-decoration: line-through">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>View more<span style="text-decoration: line-through">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 

Or use an inline-block

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

Answer 2

This is a somewhat cleaner version of @RobAu his second solution. It should work.

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

 Last Action Items<span style="width: 100px">&nbsp;</span>View more<span style="width: 50px">&nbsp;</span> 

Answer 3

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

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

Code Snippet Demonstration:

 .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