CSS add html element

Question

I have a small website (Ubuntu, Apache2, PHP) and every page on this website has a similar content: The name of the website on the top, the navigation bar, some contact information, like my e-mail, and so on. Is there any way to add these elements through CSS? So that I only have to include this CSS file and I have the title on my page? Here's a example:

#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}



  
    Test
  
  
    
            
                Some page
                

                Contact admin
            
            Title
        
    
      Some long test to see, that the navigation bar is sticky

And I want that this navigation bar appears on every new page if I just include the CSS file. I tried with the following code:

body:before {
 content: "[Content]";
}

but it seems like this can only add text. Maybe you could achieve this with JavaScript? But if yes how?

user_3744304 · Answer

You can create a small webcomponent that outputs exactly that:

const template = document.createElement('template');
template.innerHTML = `
    
        Some page
        

        Contact admin
    
    Title
`;

class MyWebsiteHeader extends HTMLElement {
  constructor() {
    super();
    this.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-website-header', MyWebsiteHeader);

#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}



Some long test to see, that the navigation bar is sticky




































gdfgdfgdfg

















 Hi!

Here's a version that completely replaces the web component with your HTML:

const template = document.createElement('template');
template.innerHTML = `
    
        Some page
        

        Contact admin
    
    Title
`;

class MyWebsiteHeader extends HTMLElement {
  constructor() {
    super();
    this.outerHTML = template.innerHTML;
  }
}

customElements.define('my-website-header', MyWebsiteHeader);

#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}



Some long test to see, that the navigation bar is sticky




































gdfgdfgdfg

















 Hi!

CSS add html element

1 Answers