CODEWITHSUNDEEP
htmlcss
sdvnksv
sdvnksv

Reputation: 9678

Vertically centered line after the text

What I try to create is a simple line that will go after the text vertically centered. So far, I've come up with the following solution:

<h1>lorem ipsum <span></span></h1>

h1 > span {
  display: inline-block;
  height: 1px; width: 50px;
  margin-bottom: .2em;
  background-color: black;
}

https://jsfiddle.net/7xqp7m2h/

enter image description here

The bad thing about this approach (not to mention that the line is not 100% vertically centered) is that this is a too compilcated solution for such an easy task.

What I thought about is maybe to add a line-through an invisible text within the span:

h1 > span {
  text-decoration: line-through;
}

However, I failed to make it work.

Any ideas on how to make a visible line-through with hidden text, or maybe another solution that would be simplier than what I have now?

Upvotes: 1

Views: 52

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

Flex can easily help you (set a width if you wish to h1 or pseudo ).

the use of a pseudo avoids the extra span in the HTML, you can apply it to any title level .

h1 {
  display: flex;
  background: gray;
}
h1:after {
  content: '';
  border-top: 1px solid;
  flex: 1;
  margin: auto 0.5em;
}

<h1>lorem ipsum </h1>

https://jsfiddle.net/7xqp7m2h/4/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115279

No need for a span at all.

A pseudo-element and flexbox can do that.

JSFiddle Demo

h1::after {
  content: '';
  height: 1px;
  background: red;
  flex: 1;
  margin-left: .25em;
}
h1 {
  display: flex;
  align-items: center;
}

<h1>lorem ipsum</h1>

Upvotes: 1

StefanJanssen
StefanJanssen

Reputation: 456

https://jsfiddle.net/9crkt4hn/

Using &nbsp; as text in the span will make a space without seeing it as a space :P As you see in the fiddle you see it works without problems.

Upvotes: 0

Related Questions