H1 tag with span block

[donboe]

I have a h1 tag with a span inside.:

<h1> Main text <span>Span text</span></h1>

I would like to have the span below the main text, so I could use:

h1 span{
    display: block;
}

But how do I avoid that the span (block) element extends the width of the main h1 text? Since I use before and after pseudeo classes for the span tag with a line before and a line after the span tag

Thank you in advance

[PaulOB]

@donboe

h1 span{
display: block;
}

Use display:table as it is shrink to fit.

e.g.

h1 span{
    display: table;
}

[donboe]

@PaulOB

Use display:table as it is shrink to fit.

e.g.

h1 span{
display: table;
}

@PaulOB . Great as ever. Thanks a lot mr. OB

[donboe]

Hi Paul. One last question about this. This is what I have in the css

.featured .featured-card .card-body
{
	text-align: center;
}

.featured .featured-card .card-body .card-title
{
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 1px;
	color: RGB(75, 175, 75);
}

.featured .featured-card .card-body .card-title span
{
	display: table;
	font-size: 80%;
	text-align: center;
	text-transform:lowercase;
}

As you can see do I have the text centered on the parent (card-body). The card title is centered, but the span with display table isn’t. Or is the approach completely wrong?

Thank tou in advance

[Ray.H]

@donboe

The card title is centered, but the span with display table isn’t.

margin:auto should fix that

.featured .featured-card .card-body .card-title span
{
  display: table;
  margin: auto;
  font-size: 80%;
  /*text-align: center; /*you can remove this, it inherits*/
  text-transform:lowercase;
}

You are dealing with a shrink to fit container so you could not notice text-align center working

If it would of had a width you would see that text-align was working

h1 span
{
 display: table;
 width:50%;
 font-size: 80%;
 text-transform:lowercase;
}