Background Title Text

I’m trying to come up w a cleaner, more responsive way to create background text behind other text and a line. I have a working version on codepen which is what I want as far as how it looks, but I wanted to find a way to clean it up so that the line and text is always vertically centered, so when I change the background front size on smaller screens the main title and line are centered vertically. Any ideas?

codepen:

I’d start with something more simpler like this:

If you have to have the word " Background" in the html then add an extra element instead of the pseudo element. It seemed more semantic to have the text in the pseudo element as it’s not really a heading.

1 Like

You might want to avoid having the background text similar in width as the foreground text on the small screen. That may result in more cognitive load as the front text obscures the back text.

1 Like

Yes there are a lot of things to consider and what to do with wrapping text etc.

thanks Paul… that’s much cleaner and easier to deal with… is there a way to to have the
content: “Background” part of the html? as an attribute or something? other than an inline style. The word “background” will be a different word in each example when this is used.

Thanks again!!!

Add an extra element and you can do this.

You can use two spans if you prefer rather than a span and a b element.

e.g.

Or with a data attribute in the html for the text.

that works Thanks… sorry another question… I was trying to play with the vertical positioning of the Title Here ,.title span… I tried adding padding or margin to offset from center a bit but it adds a second stroke on the left. what is the proper way to say position “Title Here” closer to the bottom rather than n vertically centered.

Sorry if this is easy, but flex always screws me up

You’d be better off just adjusting the top position by a pixel or two to move it down. In that last codepen you would adjust here.

.title span {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;/* adjust this top position e.g. top:4px */
  bottom: 0;
  align-items: center;
}

Flex will align at natural positions such as top, bottom, center baseline etc but you want it at the vertical middle but then offset a little bit. That’s not natural so you have to move it some other way such as moving the top position because that controls the height of that element.

1 Like

I forked your last codepen (the one with the data attribute) and tried that, but I’m getting odd behavior. I adjusted .title span top and it required a large number (85px) to move it to the bottom which seems odd. It also adds a second stroke when the screen is wider than 990px.

Sorry there was a typo :blush: and the second span wasn’t closed (that’s the problem with making quick changes ;)).

I’ve updated it here.

I’ve used a percent for the top position so it stays relative to the size and the same for the green line. You can open and close that browser window to see it in action. Just adjust to suit :slight_smile:

1 Like