How could I add a header to a HTML page via CSS?


Tags: html,css,title,pandoc,heading

Problem :

There is a script that uses Pandoc to produce a HTML representation of an input Markdown file. Assuming that the only control over the HTML representation I have is the specification of a single CSS file, how could I add a site title/header to the HTML?

For example, let's say I wanted to add some very simple heading a bit like the "ATLAS Briefings" bar at the top here, how would I do it in CSS, not in the HTML of the page?:



Solution :

Use the content property in ::after or ::before pseudo-element to add additional text.

You can also position it elsewhere with absolute and top/bottom,left/right properties.

#site-title::after {
  content: "Another Title";
  /* If you need to position it, uncomment and modify the below values
  position: absolute;
  top: -5px; 
  left: 20px */
}

/* Add below rule if you need to position the additional text w.r.t to the current title */
#site-title{
  position: relative;
}

Output:

enter image description here


    CSS Howto..

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    how to style a horizontal submenu with nested

      How to read contents of an external script/style?

      How HTML Inheritance works with conflicting styles rules in CSS?

      How to make divs re-arrange when another div is positioned between existing?

      How Do I Perfectly Center a Float Element in Between Two Floated Elements?

      Can't figure out how to code my css

      How to make css background-blend-mode work with gradients?

      How to position background image in bottom right corner? (CSS)

      How do I disable the shadow only on one edge?

      how to hide submenus in jquery menu

      how to custmize font awasome icons using cheat sheet in css?

      Show/hide (fade in/out) several DIVS inside table row with several A HREF in other row and columns

      How can I get this CSS to display properly in IE8?

      How to same element with unique XPath/CSS selector by both ID and Class?

      How can I set different background images for different li with same class

      How to make link change the css in the following page [closed]

      How to add styling to active input's previous sibling using CSS only [duplicate]

      how to set the child-class height as per the parent div using css

      CSS/Javascript: How to make rotating circular menu with multiple states?

      How can I give an image a black opaque overlay?

      how to Put a img and text middle of a div

      How to rotate text using CSS

      How do I make a Google Map span 100% remaining height between header and footer?

      How to center align a glyphicon to the middle of the page at all screen sizes

      How to calculate CSS letter-spacing v.s. “tracking” in typography?

      How to stretch segment of image in html/css

      How can have all the images show up on my slider whilst differentiating each image with its own div tag?

      How do I place a DIV class in a specific position over another DIV class?

      How do I know when is the right moment to stop using a specific css vendor-prefix?