CSS: centered heading over multible lines, underline just the bottom words

HTML-CSS
1

Hey everyone!

I´m happy to be a new member of this forum. I have invested much time, but I cannot find a solution to make the CSS underline like the following picture:

Here how it should look:


It is a heading with centered text. At bigger screens, the text is displayed in just one line.

It would be nice if the red underline isn´t directly connected with the words (so that it behaves responsively).

Have you a CSS snippet or a link?

Thanks in advance & best regards!

2

Which challenge are you up to?

3

“text-decoration: underline;”

4

Did you make the picture or was it a screenshot from a working website? If from a website, use the dev tools in your browser to inspect the element to see what the code is.

Would that break line like the image shows? The line looks to be lower than a typical underline. Maybe some kind of :after code is being used.

5

image
Right, text-decoration: underline doesn´t work in that case…

The Screenshot is made by powerpoint :slight_smile:

6

I worked it out.
Put the text into a <span></span> apply a bottom border to the span and add a white background in your CSS. You can add padding to the span to increase the distance between the bottom of the text and the underline. You can experiment with line-height: as well.

image
image
image

1 Like
7

Very nice, thank you for the solution!

1 Like
8

If someone will redo this, here is my final css code:

	background-color: white;
	border-bottom: 1px solid #C81A2E;
	color: #000000;
	font-size: 21px;
	padding-top: 6px;
	line-height: 1.3;
	padding-bottom: 4px;
9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.