Obtenga el ancho de un div, botón, etc. en CSS

Question

button {
    width: auto;
    display: inline-block;
    (...)
}
button:before {
    width: (???);
    (...)
}

¿Cómo puedo obtener el ancho del botón en button:before cuando el ancho del botón no es fijo?

html css

0

이기름 5 oct. 2019 a las 09:20

Answer 1

button {
    width: auto;
    display: inline-block;
    position:relative;
    (...)
}
button:before {
    content:""; *// never forget to put content with empty strings. If you forget it will not work`*
   position:absolute; *//set this to position absolute and the parent which is the btn set position:relative*
   width:100%;
   height:100%; *// if you want the full size of the btn is like this*
   top:0;
   left:0
}

``

0

Raquel Santos 5 oct. 2019 a las 14:16

Answer 2

Si desea que su botón :: antes del botón tan grande como puede, simplemente haga lo siguiente

button {
  width: auto;
  display: inline-block;
  background: blue;
  position: relative;
}

button::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="test.css">
  <title>Document</title>
</head>
<body>
  <button>Test</button>
</body>
</html>

Configurar before con width: 100% le dará exactamente el mismo tamaño que el botón.

0

Daniel Rodríguez Meza 5 oct. 2019 a las 06:34

Answer 3

Esto te ayuda creo

button{
position:relative;
}
button:before{
    content: "";
    width: 100%;
    position: absolute;
    height: 100%;
    background: red;
    z-index: 100;
    top: 0;
    left: 0;

}

<button >Hi everyone! </button>

0

Umut Eskitoğlu 5 oct. 2019 a las 06:33

Obtenga el ancho de un div, botón, etc. en CSS

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html