├── img └── thumb.png ├── README.md ├── css └── estilos.css └── index.html /img/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/pseudoelementos-css/HEAD/img/thumb.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Que rayos son los Pseudoelementos en CSS. 2 | ### [Tutorial: https://youtu.be/wHY02FpNYnU](https://youtu.be/wHY02FpNYnU) 3 | 4 | ![Que rayos son los Pseudoelementos en CSS.](https://raw.githubusercontent.com/falconmasters/pseudoelementos-css/master/img/thumb.png) 5 | 6 | Por: [FalconMasters](http://www.falconmasters.com) -------------------------------------------------------------------------------- /css/estilos.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --fondoPrimario: #323941; 3 | --fondoSecundario: #1A1E21; 4 | --azulPrimario: #3860EC; 5 | --azulSecundario: #2247ce; 6 | } 7 | 8 | body { 9 | background: var(--fondoPrimario); 10 | font-family: 'Roboto', sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | min-height: 100vh; 16 | } 17 | 18 | .contenedor { 19 | background: var(--fondoSecundario); 20 | max-width: 500px; 21 | padding: 30px; 22 | border-radius: 20px; 23 | } 24 | 25 | .logo { 26 | width: 100%; 27 | margin: 50px 0; 28 | display: flex; 29 | justify-content: center; 30 | } 31 | 32 | svg { 33 | width: 70%; 34 | } 35 | 36 | .dialogo { 37 | background: var(--fondoPrimario); 38 | padding: 25px; 39 | color: #fff; 40 | margin-bottom: 30px; 41 | border-radius: 15px; 42 | font-size: 18px; 43 | line-height: 28px; 44 | 45 | position: relative; 46 | } 47 | 48 | 49 | /* Pseudoelementos CSS */ 50 | .dialogo::selection { 51 | background: #D61A1A; 52 | } 53 | 54 | .dialogo::after { 55 | content: ''; 56 | display: block; 57 | position: absolute; 58 | bottom: -40px; 59 | border-top: 20px solid var(--fondoPrimario); 60 | border-right: 20px solid transparent; 61 | border-left: 20px solid transparent; 62 | border-bottom: 20px solid transparent; 63 | right: calc(50% - 20px); 64 | } 65 | 66 | 67 | .boton { 68 | width: 100%; 69 | background: var(--azulPrimario); 70 | display: inline-block; 71 | padding: 25px; 72 | border: none; 73 | cursor: pointer; 74 | color: #fff; 75 | text-transform: uppercase; 76 | border-radius: 5px; 77 | margin-bottom: 20px; 78 | transition: .3s ease all; 79 | } 80 | 81 | .boton:hover { 82 | background: var(--azulSecundario); 83 | } 84 | 85 | .enlace { 86 | text-transform: uppercase; 87 | text-align: center; 88 | display: block; 89 | text-decoration: none; 90 | color: #D4D4D4; 91 | font-size: 14px; 92 | margin-bottom: 20px; 93 | } 94 | 95 | .enlace:hover { 96 | text-decoration: underline; 97 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pseudoelementos CSS 7 | 8 | 9 | 10 | 11 | 12 |
13 | 16 | 17 | 18 | 19 | 20 | Registrate 21 |
22 | 23 | --------------------------------------------------------------------------------