0
240
Vistas¿Cómo puedo agregar texto en una posición relativa a un pseudoelemento?
Estoy tratando de agregar texto alineado con un pseudoelemento en un div. Como referencia, estoy hablando de .div2::before en mi código, ya que es la línea discontinua entre el círculo interior y el exterior. Quiero agregar una etiqueta que diga "Grosor de pared" como se muestra a continuación. El texto debe ajustarse con el tamaño del círculo, ya que el tamaño del círculo interior/exterior aumentará/disminuirá, pero la posición del texto deberá adaptarse. Cuál es la mejor manera de lograr esto?
jsFiddle: https://jsfiddle.net/Kaevonz/cjpkxg6L/6/
.container { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 500px; border: 1px solid gray; } .elem { box-sizing: border-box; } .div1 { border-top: 3px solid #0DA8AA; border-left: 1px solid #0DA8AA; border-right: 1px solid #0DA8AA; height: 60px; width: 150px; background: white; } .div2 { border: 1px solid #0DA8AA; border-radius: 50%; width: 340px; height: 340px; background: white; display: flex; align-items: center; justify-content: center; position: relative; } .div2::before { content: ''; position: absolute; left: 0; top: 50% - 0.5px; width: 50%; height: 1px; border-top: 0.5px dashed black; transform: translateY(-50%) rotate(45deg); transform-origin: right center; } .div3 { border: 1px solid #0DA8AA; border-radius: 50%; width: 120px; height: 120px; background: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } .div4 { border-top: 0.5px dashed black; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .div5 { border: 0.5px dashed black; width: 150px; height: 50px; position: absolute; top: 0; transform: translateX(-50%); left: 50%; float: left; } <div class="container"> <div class="elem div1"></div> <div class="elem div2"> <div class="elem div3"> <div class="elem div5"> </div> <div class="elem div4"> </div> </div> </div> </div>1 Respuestas
Responde la pregunta0
Necesitamos dos elementos uno dentro del otro. Como no podemos hacer eso con pseudo elementos, necesitamos agregar un elemento al marcado.
El elemento recién agregado servirá como referencia sobre dónde debe colocarse el texto, por lo que lo alinearemos exactamente de la misma manera que lo haríamos con el primer pseudo elemento.
Y finalmente usamos un elemento hijo o preferiblemente un pseudo elemento para el texto.
Nota : para pseudoelementos, el texto se puede agregar a través de atributos.
MANIFESTACIÓN
.container { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 500px; border: 1px solid gray; } .elem { box-sizing: border-box; } .div1 { border-top: 3px solid #0DA8AA; border-left: 1px solid #0DA8AA; border-right: 1px solid #0DA8AA; height: 60px; width: 150px; background: white; } .div2 { border: 1px solid #0DA8AA; border-radius: 50%; width: 340px; height: 340px; background: white; display: flex; align-items: center; justify-content: center; position: relative; } .div2::before { content: ''; position: absolute; left: 0; top: 50% - 0.5px; width: 50%; height: 1px; border-top: 0.5px dashed black; transform: translateY(-50%) rotate(45deg); transform-origin: right center; } .div3 { border: 1px solid #0DA8AA; border-radius: 50%; width: 120px; height: 120px; background: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } .div4 { border-top: 0.5px dashed black; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .div5 { border: 0.5px dashed black; width: 150px; height: 50px; position: absolute; top: 0; transform: translateX(-50%); left: 50%; float: left; } /* NEW */ .text { height: 1px; position: absolute; left: 0; top: 50%; width: 50%; transform: translateY(-50%) rotate(45deg) translateX(-20%); transform-origin: right center; } .text:before { content: 'WE HAVE TEXT, lots of it'; transform: translateY(-50%) rotate(-135deg); position: absolute; right: 100%; writing-mode: vertical-rl; height: 100px; /* height as width */ } /* Preview */ .div2 { animation: x 1s linear alternate infinite; } @keyframes x { from { height: 300px; width: 300px; } to { height: 450px; width: 450px; } } <div class="container"> <div class="elem div1"></div> <div class="elem div2"> <div class="text"></div> <!-- NEW --> <div class="elem div3"> <div class="elem div5"> </div> <div class="elem div4"> </div> </div> </div> </div>Tuve que hacer algo de magia de alineación de texto, que puede o no ser óptimo, pero en este punto creo que la idea se transmite.