andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #181 from vanribeiro/update-pseudo-elem-double-colon-notation

Browse Source 
(fix) add double colon notation
This commit is contained in:
Angelos Chalaris
2020-03-23 08:52:49 +02:00
committed by GitHub
parent b1f7094d57 bd0df626a8
commit 2214f86ffa
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/border-with-top-triangle.md
View File

@ -20,7 +20,7 @@ Creates a text container with a triangle at the top.
margin-top: 20px;
}
.container:before, .container:after {
.container::before, .container::after {
content: '';
position: absolute;
bottom: 100%;
@ -29,7 +29,7 @@ Creates a text container with a triangle at the top.
border-bottom-color: #dddddd;
}
.container:after {
.container::after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #ffffff;
@ -38,10 +38,10 @@ Creates a text container with a triangle at the top.
#### Explanation
- Use the `:before` and `:after` pseudo-elements to create two triangles.
- The color of the `:before` triangle should be the same as the container's border color.
- The color of the `:after` triangle should be the same as the container background color.
- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.
- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.
- Use the `::before` and `::after` pseudo-elements to create two triangles.
- The color of the `::before` triangle should be the same as the container's border color.
- The color of the `::after` triangle should be the same as the container background color.
- The border width of the `::before` triangle should be `1px` wider than the `::after` triangle, in order to act as the border.
- The `::after` triangle should be `1px` to the right of the `::before` triangle to allow for its left border to be shown.
#### Browser support