Algo extraño pasa entre mi classe y psuedo elemento respecto al posicionamiento

Question

tengo un problema on unas coordenadas entre el objeto que tengo como clase y el pseudoelemento o clase hijo en mi codigo css.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Effectos CSS3</title>
    <!--<link rel="stylesheet" type="text/css" href="NORMALIZE.css">-->
    <link rel="stylesheet" type="text/css" href="Keyframe2.css">
</head>
<body>
    <div class="arrow">
        <p>Arrow.</p>
    </div>
</body>
</html>

este es el codigo que uso en css3

div{
    font-family: 'arial';
    background-color: #a8cf45;
    margin: 15px 20px;
    padding: 5px 40px;
    text-align: center;
    font-weight: bolder;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
}
/*
Clase 123
*/
.arrow:before{
margin: 15px 20px;
-moz-transition-duration: 0.3s;
content: '';
/*Caracteristicas que forman el triangulo #a8cf45*/
border-color: transparent red
              transparent transparent;
border-style: solid;
border-width:  15px 15px 15px 0;
/*Posicionamiento del triangulo*/ <-Es con esta parte que presumo que por alguna razon no funciona correctamente.
left: 5px;
position: absolute;
top: 50%;
margin-top: -15px
}

.arrow:hover:before{
    left: -15px;
}

Asi es que se ve mi Error.

Este es mi objetivo.

Le falta una posición absoluta o relativa al `div`, o de lo contrario la posición absoluta del pseudo-elemento será sobre el documento (o el primer elemento con posicionamiento) — Alvaro Montoro, May 16 '17 at 19:07
Oh muchas gracias no sabia que habia que hacer esto en caso de usar sub clases y pseudo-elementos pondre tu comentario en mis notas, de nuevo gracias y me parece muy interesante el caso. — Carlos Alvarez, May 16 '17 at 19:46
Si tienes dudas sobre posicionamiento puedes consultar la siguiente pregunta-respuesta que puse yo hace un tiempo: https://es.stackoverflow.com/questions/37930/cual-es-la-diferencia-entre-position-relative-position-absolute-y-position. Además, si has conseguido resolver el problema deberías de añadir el código con el que has resuelto tu problema. — Francisco Romero, Aug 25 '17 at 17:42

score 0 · Answer 1 · answered Sep 21 '17 at 01:26

No sé si se resolvió el problema pero yo en vez de construir un triángulo mediante la anchura de los bordes, me inclinaría por utilizar entidades HTML.

div{
    font-family: 'arial';
    background-color: #a8cf45;
    margin: 15px 20px;
    padding: 5px 40px;
    text-align: center;
    font-weight: bolder;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
}
/*
Clase 123
*/
.arrow{
    position:relative;
    text-align:center;
    cursor:pointer;
}
.arrow:before{
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
content: '\025C0';
    position: absolute;
    color: #a8cf45;
    font-size: 4.5em;
    line-height: 70%;
    padding: 0;
    margin-left: -50%;
    /*top:20%; PARA DOS LÍNEAS NECESITARÁS AJUSTAR EL TOP*/
}

.arrow:hover:before{
    margin-left:-75%;
}

<menu class="menu-horizontal" style="width:100%;">
    <div class="arrow">
        <p>Arrow</p>
    </div>
    <div class="arrow">
        <p>Home</p>
    </div>
    <div class="arrow">
        <p>About</p>
    </div>
</menu>
<menu class="menu-vertical" style="width:25%;">
    <div class="arrow">
        <p>Inicio</p>
    </div>
    <div class="arrow">
        <p>...</p>
    </div>
    <div class="arrow">
        <p>Sobre</p>
    </div>
</menu>

Algo extraño pasa entre mi classe y psuedo elemento respecto al posicionamiento

1 Answers1