Let me talk about the difference between pseudo-elements and pseudo-classes:
CSS pseudo-classes are for, and pseudo-elements are for HTML, CSS pseudo-class selector is a selector, and pseudo-classes are "fake" HTML tags
pseudo-classes (selectors) is essentially to make up for conventional CSS selectors the weaknesses in order to get more information;
the pseudo-element is essentially creates a virtual container contents;
in CSS3, pseudo-classes and pseudo-elements of grammar has been further adjusted (a colon and two colons);
in in development, it can be used at the same time a plurality of pseudo-class, but only use a pseudo-element;
The parent element
#demo{
margin: 100px;
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
Pseudo-element
#demo:before{
content:"";
width:0;
height:0;
position: absolute;
top: 34px;
left: 100px;
border-top:solid 15px transparent;
border-left:solid 15px black ;
border-bottom:solid 15px transparent;
}
When the modified
border-right:solid 15px transparent;
border-left:solid 15px transparent;
border-bottom:solid 15px black;
Lower triangle appears on the sideline
When the modified
border-top:solid 15px black;
border-right:solid 15px transparent;
border-left:solid 15px transparent;
Small triangle next sideline
When the modified
border-top:solid 15px transparent;
border-right:solid 15px black;
border-bottom:solid 15px transparent;
Small triangle to the left of line
This can also be made right triangle, into
border-right:solid 15px transparent;
border-bottom:solid 15px black;
