You must read part One Of this Article to understand below article Read Part One
1] Pseudo-element
syntax: Tag::pseudo-element
Use: Style targeted text and place fake element before and after tag
1
Pseudo element is divided into three type based on the Targeting :
- Tag:first-line -Style first line of paragraph
- Tag:last-letter -style first letter of paragraph
- Tag:selection -style selected text
<div> First child
</div>
style:
div:first-letter{color:red;}
2
Pseudo class is divided into two type based on the placing tags :
- Tag::before
- Tag::after
<div>
first child first type
</div>
style:
div:before {
content: "before";
}
div:after {
content: "after";
}
Some Notes On The Syntax
You could leave thecontent property empty and just treat the pseudo-element like a content-less box, like this:#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}content property altogether. If you did, the pseudo-element wouldn’t work. At the very least, the content property needs empty quotes as its value.One final point regarding the syntax. Technically, you could implement a pseudo-element universally, without targeting any element, like this:
:before {
content: "#";
}<body> tag and all of its content, you’d still see two hash symbols on the page: one in the <html> element, and one in the <body> tag, which the browser automatically constructs.- Why to use ::before and ::after
- Important to write nested tags
- Used when you want to add less tags to your Html document
- Notice about ::before and ::after
- Display content within the tags not outside
- Your content get effect of parent tags but You can also style content individually
No comments:
Post a Comment