Horizontal line between two words

Question

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

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

Without the \"-\"

I did this: https://

Answer 1

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

  
Last Action items
  

    View More
  

JSFiddle Demonstration