Thursday, October 31, 2013

Css Content code and HTML Code

Css Content
The content property is used with the ::before and ::after pseudo-elements to generate content in a document.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
p:before {
    content:"start";
}
p:after {
    content:"end";
}
</style>

</head>

<body>
<p>test</p>
</body>
</html>

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<style type="text/css">
.myClass::before {
    content: url(arrowbrochure.png) " My ";
}
.myClass::after {
    content: "'s " attr(title) " section";
}

.email-address:before {
   content: "Email address: ";
}
</style>
<h3 class="myClass" title="cool">content</h3>
<h3 class="myClass" title="sweet">content</h3>
<h3 class="myClass" title="lucious">content</h3>
<ul>
   <li class="email-address">chriscoyier@gmail.com</li>
</ul>
</BODY>
</HTML>

CSS CODE

.regular-checkbox {display: none}
.regular-checkbox + label {    background-color: #fafafa;border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding:7px;border-radius: 3px;display: inline-block;position: relative;}
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.regular-checkbox:checked + label {background-color: #e9ecee;border: 1px solid #adb8c0;    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);color: #99a1a7;}
.regular-checkbox:checked + label:after {content: '\2714';font-size: 14px;position: absolute;top: 0px;left:3px;color: #43a93a;}






Following  Character Entities  Sheet for  CSS Content code and HTML Code. Below  HTML code and CSS Code very Useful   for Web Developers

Css Content code Description Display /Output sign Html Code
\2018 Left Single Smart Quote ‘ &lsquo;
\2019 Right Single Smart Quote ’ &rsquo;
\00A9 Copyright © &copy;
\2713 Checkmark ✔ &#x2714;
\2192 Right arrow ￫ &#65515;
\2190 Left arrow ￩ &#65513;
\201C Left double quotation mark “ &ldquo;
\201D Right double quotation mark ” &rdquo;
\00AB Double left-pointing angle quotation mark « &laquo;
\00BB Double right-pointing angle quotation mark » &raquo;
\2039 Single left-pointing angle quotation mark ‹ &lsaquo;
\203A Single right-pointing angle quotation mark › &rsaquo;
\201E Double low-9 quotation mark „ &bdquo;
\201A Single low-9 quotation mark ‚ &sbquo;
\202F Narrow no-break space   &#8239;
\0060 Grave Accent ` &#x60;
\00B4 Acute Accent ´ &#xb4;
\0027 Apostrophe ' &#039;
\0022 Quotation Mark " &#34;
\2714 Asterisk (star) * 
&#42;
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)