Skip to content

Instantly share code, notes, and snippets.

@GeorgeTzellis
Created July 23, 2012 16:09
Show Gist options
  • Save GeorgeTzellis/3164444 to your computer and use it in GitHub Desktop.
Save GeorgeTzellis/3164444 to your computer and use it in GitHub Desktop.
pseudo-elements on <html>
/* pseudo-elements on <html> */
html{
margin: 3em;
border: 1em solid red;
padding: 1em;
min-height: 100%;
position: absolute;
background-color: cyan;
}
html::before{
content: "This is html::before.\AThe red border belongs to html.";
color: white;
background:green;
white-space: pre;}
html::after{
content: "This is html::after.\A The bottom part of the border isn't added in FF/Win7";
color: white;
background: green;}
body{
background: linear-gradient(45deg, #0a0, yellow);
}
input{
position: fixed;
}
This is the body's content.<br>
Its background extends to html's border.<br>
This is text<input>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment