Ahora probando con before

por **Admin** Vie Ago 10, 2018 10:12 pm

Título de foro

¡Bienvenidos, usuarios! Aquí nos encanta leer y compartir fanfics de todo tipo, sobre anime, videojuegos, de creación propia, poesía, películas, series y más. Para los que gustan desafiarse o entrar en concursos, aquí los hay, cada mes tenemos un concurso para que demuestres tu talento en escritura.
Título de prueba Título de prueba Título de prueba Título de prueba

Código:: <br><center><link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet"><style type="text/css"> .cuadronuev {width: 550px; height: 200px; border: 1px solid #CCCCCC; background-color: #fafafa; display: block; overflow; hidden;} .cuadronuev img {width: 150px; height: 150px; margin: 15px 0px 0px -300px; padding: 0px; border: 8px solid #F0F0F066; box-shadow: 0px 0px 1.1px 0px #d2acac;} a.te {width: 100px; height: 18px; border: 1px solid #3C1F39; color: #EBEBEB; display: inline-block; margin: 0px 1px 1px 212px; font-family: Oswald; text-align: center; transition: .5s ease-in-out; padding: 1px; overflow: hidden; position: relative; background-color: #3C1F39; transform: translateY(-130px); font-size: 11px;} a.te:before {content: ""; position: absolute; bottom: 0; height: 20px; width: 210%; animation: width 0.5s; transition: all 0.8s; top: 0; margin: 0px; background-image: linear-gradient(50deg, #902121 45%, transparent 20%); left: -300%;} a.te:after {content: "Ir al tema"; color: #EBEBEB; background-image: linear-gradient(40deg, #921136 50%, transparent 60%); left: 300px; position: absolute; animation: width 0.5s; transition: .5s ease-in-out; text-align: center; width: 100%; box-sizing: border-box; height: 20px; margin: -1px 0px 0px 0px; line-height: 19px;} a.te:hover:before {left: 0px;} a.te:hover:after {left: 0px;} .cuadronuev p {text-align: justify; font-family: Dosis; font-size: 12px; color: #000000; margin: -127px 0px 0px 100px; width: 200px;} .cuadronuev h2 {width: 190px; font-family: Questrial; font-size: 30px; color: #902121; text-align: center; transition: 1s ease-in-out; text-shadow: 0px 0px brown, 0px 0px #902121; position: absolute; margin: -160px 0px 0px 270px; padding: 3px;} .cuadronuev h2:hover {color: #F1F1F1; text-shadow: 2px 1px 5px brown, -1px -1px #902121;}</style><div class="cuadronuev"><img src="https://i76.servimg.com/u/f76/19/46/26/75/imagen10.jpg"><h2>Título de foro</h2><p>¡Bienvenidos, usuarios! Aquí nos encanta leer y compartir fanfics de todo tipo, sobre anime, videojuegos, de creación propia, poesía, películas, series y más. Para los que gustan desafiarse o entrar en concursos, aquí los hay, cada mes tenemos un concurso para que demuestres tu talento en escritura.<br><a href="#" class="te">Título de prueba</a><a href="#" class="te">Título de prueba</a><a href="#" class="te">Título de prueba</a><a href="#" class="te">Título de prueba</a></p></div> </center>