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

add double colon notation

Browse Source
This commit is contained in:
Vanessa Ribeiro
2020-03-23 00:56:29 -03:00
parent b1f7094d57
commit bd0df626a8
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; margin-top: 20px;
} }
.container:before, .container:after { .container::before, .container::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
@ -29,7 +29,7 @@ Creates a text container with a triangle at the top.
border-bottom-color: #dddddd; border-bottom-color: #dddddd;
} }
.container:after { .container::after {
left: 20px; left: 20px;
border: 10px solid transparent; border: 10px solid transparent;
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
@ -38,10 +38,10 @@ Creates a text container with a triangle at the top.
#### Explanation #### Explanation
- Use the `:before` and `:after` pseudo-elements to create two triangles. - 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 `::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 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 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. - The `::after` triangle should be `1px` to the right of the `::before` triangle to allow for its left border to be shown.
#### Browser support #### Browser support