Home > Article > Web Front-end > Learning about pseudo-elements :Before and :After_html/css_WEB-ITnose
Learning about pseudo-elements :Before and :After_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:07:411230browse
The main purpose of Cascading Style Sheets (CSS) is to add styles to HTML elements. However, in some cases adding additional elements to the document is redundant or impossible. In fact, there is a feature in CSS that allows us to add additional elements without disturbing the document itself, which are "pseudo-elements".
You must have heard of this term, especially if you have been following our tutorials. Click here to browse other articles by the original author
In fact, there are indeed some members of the CSS family (CSS selectors) that are classified as pseudo-elements such as: :first-line, :first-letter, ::selection, :before and :after. However, for the purposes of this article, we will limit our discussion to the :before and :after elements. Therefore, "pseudo-elements" in this article will refer specifically to these two pseudo-elements (:before and :after), and we'll start with the basics to examine this unique topic.
About syntax and browser support
Pseudo elements actually exist in CSS1, but the :before and :after we are discussing now were released in CSS2.1. Initially, the syntax for pseudo-elements was ":" (one colon). With the development of the web, the revised pseudo-element in CSS3 used "::" (two colons), that is::before and :: after? to distinguish pseudo-elements and pseudo-classes (such as :hover, :active, etc.)
However, whether you use a single colon or a double colon, the browser will recognize them. Since IE8 only supports the single-colon format, for safety reasons, if you want wider browser compatibility, then use the single-colon format!
What it does
In short, pseudo-elements will insert additional elements before and after the content element, so when we add them, use the following markup, they Technically equal.
:before :after /tr> |
But these elements are not actually generated in the document. They will be visible externally, but you won't find them in the document's source code, so in effect they are "fake" elements.
Using pseudo-elements
Using pseudo-elements is relatively easy, :before will "add" an element before the content and :after will "add" an element after the content. To add content among them we can use the content attribute.
For example, the following code snippet will add a quote before and after the quote.
|
blockquote:before { content : open-quote ; blockquote:after { content : close-quote ; |
| blockquote:before { content : open-quote ; blockquote:after { content : close-quote ; |
Pseudo-element styles
Despite being "fake" elements, pseudo-elements actually behave like "real" elements and we can add any style to them, such as Change their color, add background color, adjust font size, adjust the text within them, and more.
content : open -quote;font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background : #ddd ;
|
| blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff ; background : #ddd ; float : left ; position : relative ; top : 30px ; border-radius: 25px; height: 25px; width: 25px; > font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background : #ddd ; float : right ; position : relative ; bottom : 40px ; border-radius: 25px ; height : 25px ; width : 25px ; |
Associated background image
We can also replace the content with an image instead of just plain text. Although the content attribute provides url() to insert images, in more cases, I prefer to use the background attribute to have better control over the image.
blockquote :before { content : " " ;font-size : 24pt; text-align : center ; line-height : 42px;
position : relative ;top : 30px ;
border-radius : 25px;
|
| blockquote:hover:after, blockquote:hover:before { background-color : #555 ; |
| transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms; |
MORE INSPIRATION
To inspire you, we have chosen three cool examples that will give you lots of ideas on web design.
Captivating Shadows
In this tutorial Paul Underwood explains how to create more realistic and attractive shadow effects.
Use the pseudo-elements :before and :after . Both of them are absolutely positioned and use negative z-index to place them behind the image to achieve a shadow effect.
3D button
This is a very clever implementation, using pseudo elements combined with CSS3 box-shadow to draw an amazing 3D button, using only CSS and single anchor text. The pseudo element: before is used to add the number "1" to the left side of the button.
Overlay Image Effect
It is also possible to use pseudo-elements to create a "messy" overlay image effect using just an image tag. Pseudo elements are used to create the illusion of overlapping images by using a negative z-index value to make the "overlay" image behind the real image.
Conclusion
Pseudo elements are cool and practical. Basically, every element we add does not interfere with the existing ones. HTML structure, and pseudo-elements can do almost everything we can think of.
In fact, there are some improvements to pseudo-elements, which are currently being carried out gradually, such as nested pseudo-elements div::before::before { content: ”; } and multiple pseudo-elements div::before(3) { content: "; }. Obviously, in future web design, these improvements will give our designs more forms (more possibilities). However, they will be supported in the latest browsers, so let's wait patiently for now!
Original source: Thoriq Firdaus