Thick border behind heading?

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


I am trying to replicate it here but having problems;

Any ideas?

Thank you


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.

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.


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.

Hi there kaevans,

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

<html lang="en">

<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 */



<!-- the span elements must not have any spaces in between -->




I got it working i believe, thanks!

Yes that’s much better :slight_smile:

1 Like

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