prisskreative
6/29/2014 - 7:52 PM

Pseudo-elements

Pseudo-elements

firs-letter-line.html
content_copyfile_download
<!--Pseudo-elements
Style certain part of the document that not always exist 
as elements or we can really target with a simple selector.  
:: syntax

::first-line target first line of text 

::first-letter target first character of a sentences -->

<body>
	<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
		</p>
</body>


<style>


.intro::first-line {
	color:royalblue;
}
.intro::first-letter {
	background:#ccc;
	color:royalblue;
}

</style>
before-after-pseudo.html
content_copyfile_download
<!-- **Pseudo-elements - Pseudo-classes
Target virtual elements that are not defined in the markup and don’t appear in the source code

Pseudo-elements
Style certain part of the document that not always exist as elements or we can really target with a simple selector.  
:: syntax

**Pseudo Classes
Target actual elements that describe certain state  
:syntax


pseudo elements
::before -   ::after 
let us insert virtual elements before and after an element’s content.-->

<!-- Doesn't appear on the source code - 
generated content: add to html from our css 
inserted into the element -->


<body>

	<p class="phone">
        555-555-777
		</p>

	<a class="dload" href="examples.pdf" tittle="pdf">
        Download File
		</a>

		<div class="box">
		hello
		</div>
</body>


<style>



.phone::before {
	content:"\2786";/* icon symbol - this is a string*/
}


.dload::after {
	content: url(../img/pdf.png);/* image - no quotes*/
}

.dload::after {
	content: attr(href);/* take href value (example.pdf) also attr(title) works - no quotes*/
	color:tomato;
}

.box::before{
	content: "";/* take href value (example.pdf) also attr(title) works - no quotes*/
	display:inline-block;
	width: 30px;
	background-color: blue;
	border-radius: 50%;
}

.box{
	border:1px solid #000;
}

.box::before, .box::after{}

</style>