Thick border behind heading?

HTML & CSS
1

Hello I am trying to recreated the effect of a border behind the text, that stops on the edges of the text…

See https://cl.ly/98293257f047

I am trying to replicate it here http://54.165.139.71/ but having problems;

Any ideas?

Thank you

2

Hi,

You could do something like this.

It may be that you would need to put the text in a span and give it position:relative and a higher z-index than the :after element. It depends on context and the z-index:-1 may make the border go below a background so you would need z-index:1 on the after element and then z-index:2 on the span.

3

Thanks Paul, it looks like its working on a a few of the headings, the ones with the light text on dark blue but not the ones in the white areas…though I can inspect it and it looks like the green border is there but its just not showing.

See http://54.165.139.71/

4

I can’t see where you mean as they seem to be working?

I have to rush out now anyway so back later this evening.

5

Hi there kaevans,

If you want it to work on all devices then try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1 {
    line-height: 1em;
    padding: 0 0.25em;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
 }

h1 span {
    display: inline-block; 
    padding: 0 0.2em;
    background-image:linear-gradient( to bottom, 
         transparent 0, transparent 48%, 
         #a1bebf 48%, #a1bebf 85%,
         transparent 85%, transparent 100% ); /* adjust values to suit */
    background-position: 0 -5%;               /* adjust values to suit */
 }

</style>

</head>
<body> 

 <h1>
<!-- the span elements must not have any spaces in between -->
  <span>deliver</span><span>outstanding</span><span>projects</span><span>&amp;</span><span>enterprise</span><span>enhancements</span>
 </h1>

</body>
</html>

coothead

3 Likes
6

I got it working i believe, thanks!

7

Yes that’s much better :slight_smile:

1 Like
8

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