diff --git a/guide/english/css/before-selector/index.md b/guide/english/css/before-selector/index.md index 4076f4588f..979c165155 100644 --- a/guide/english/css/before-selector/index.md +++ b/guide/english/css/before-selector/index.md @@ -1,68 +1,61 @@ --- title: Before Selector --- -## Before Selector -The CSS **::before** selector can be used to insert anything before the content of an element or elements. In CSS, it is called a psuedoelement. It allows the designer perform any css design before the content in an element. It is used by attaching **::before** to the element it is to be used on. -Also, it doesn't work without the **content** property. +# Before Selector +The CSS `::before` selector can be used to insert some content, usually cosmetic, *before* the content of an element or elements. It is used by attaching `::before` to the element it is to be used on. It is an inline element by default. +## Examples Let's look at some examples: - ```css - p::before { content: ""; border: solid 5px #ccc; } -span.comment::before{ +span.comment::before { content: "Comment: "; color: blue; } - ``` - ```html -
To infinity and beyond
-I am buz lightyear, I come in peace.
+I am Buzz Lightyear, I come in peace.
May the force be with youworld!!
+World!
``` -This will show `Hello world!!` in the page. +This will display `Hello, World!` on the page. -Not only strings, also images, counters or even nothing ("", useful for clearfix) can be inserted into the `content` attribute, but not HTML. There are a good number of cool things that can be made using ```::before``` and ```after``` in a creative way. You can take a look in the next link if you are curious: A Whole Bunch of Amazing Stuff Pseudo Elements Can Do +String, images, counters, or even an empty string ("", useful for `clearfix`) can be inserted into the `content` attribute. HTML cannot be inserted. -#### Single-colon vs. Double-colon -There's a bit of discussion about the right way of using pseudo-elements: old style single-colon (```:before```), used in CSS specifications 1 and 2, versus CSS3 recommendation, double-colon (```::before```), mainly to "establish a discrimination between pseudo-classes and pseudo-elements". But for compatibility reasons, single-colon is still accepted. Talking about compatibility, IE8 supports the single-colon notation only. +[See A Whole Bunch of Amazing Stuff Pseudo Elements Can Do!](https://www.w3schools.com/css/css_pseudo_elements.asp) -#### More Information: +## Single-colon vs. Double-colon +There's a bit of discussion about the right way of using pseudo-elements: old style single-colon (`:before`), used in CSS specifications 1 and 2, versus CSS3 recommendation, double-colon (`::before`), mainly to "establish a discrimination between pseudo-classes and pseudo-elements". But for compatibility reasons, single-colon is still accepted. IE8 supports the single-colon notation only. -W3Schools CSS Pseudo-elements - -CSS-Tricks ::after/::before - -Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery +## Additional Resources +- [W3Schools CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp) +- [CSS-Tricks ::after/::before](https://css-tricks.com/almanac/selectors/a/after-and-before/)