Skip to content

Instantly share code, notes, and snippets.

@rambhairao

rambhairao/css_psuedo.html

Created September 14, 2017 07:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rambhairao/b685b714de5750b01d072818392edcb9 to your computer and use it in GitHub Desktop.
Save rambhairao/b685b714de5750b01d072818392edcb9 to your computer and use it in GitHub Desktop.
Download ZIP
css before and after properties [css before and after properties simple example]// source http://jsbin.com/biwomi
Raw
css_psuedo.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[css before and after properties simple example]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> css before and after properties </title>
<style id="jsbin-css">
p{
width: 200px;
height: 50px;
background-color: red;
text-align: left;
position: relative;
}
p::before{
content: "frent";
background-color: blue;
margin-left:0px;
}
p::after{
content: "back";
background-color: yellow;
}
p:hover::after{
background-color: red;
}
</style>
</head>
<body>
<div>
<p> real content </p>
</div>
<script id="jsbin-source-css" type="text/css">p{
width: 200px;
height: 50px;
background-color: red;
text-align: left;
position: relative;
}
p::before{
content: "frent";
background-color: blue;
margin-left:0px;
}
p::after{
content: "back";
background-color: yellow;
}
p:hover::after{
background-color: red;
}</script>
</body>
</html>
Raw
jsbin.biwomi.css
p{
width: 200px;
height: 50px;
background-color: red;
text-align: left;
position: relative;
}
p::before{
content: "frent";
background-color: blue;
margin-left:0px;
}
p::after{
content: "back";
background-color: yellow;
}
p:hover::after{
background-color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment