0
373
ViewsAlineación vertical de ::after pseudo elementos
Cuando coloco una imagen svg junto al texto, con vertical-align: middle; , entonces se alinea bastante bien. Sin embargo, si uso svg en el pseudo-elemento ::after , entonces los resultados no son los esperados.
Además, cuando hago clic en el texto para eliminar su contenido, el elemento svg restante aún mantiene su posición no alineada:
Aquí está el código:
document.getElementById('em1').addEventListener('click', e => { (e.target || e.srcElement).innerText = ''; }); document.getElementById('em2').addEventListener('click', e => { (e.target || e.srcElement).innerText = ''; }); document.getElementById('em3').addEventListener('click', e => { (e.target || e.srcElement).innerText = ''; }); * { vertical-align: middle; } div { background-color: yellow; } em { background-color: pink; cursor: pointer; font-size: 41px; } #em2::after, #em3::after { content: url("data:image/svg+xml,%3Csvg%20width%3D%22110%22%20height%3D%2246%22%20viewBox%3D%220%200%20110%2046%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23f00%3Bstroke-width%3A0%22%20d%3D%22M%200%2C0%20H%20110%20V%2046%20H%200%20Z%22%20%2F%3E%3C%2Fsvg%3E"); } #em3::after { vertical-align: middle; } <div> <em id="em1">text #1</em><svg width="110" height="46" viewBox="0 0 110 46" version="1.1" xmlns="http://www.w3.org/2000/svg"><path style="fill:#f00;stroke-width:0" d="M 0,0 H 110 V 46 H 0 Z" /></svg> </div> <hr> <div> <em id="em2">text #2</em> </div> <hr> <div> <em id="em3">text #3</em> </div> ¿Cómo hacer que esto funcione, qué debe ajustarse y por qué? ¿Por qué los pseudo-elementos ::after no se alinean automáticamente con sus "padres"?
·
Juan Pablo Isaza
1 answers
Answer question0
Se puede solucionar dando vertical-align: text-bottom; height: 46px; display: inline-block; a los pseudo-elementos after :
document.getElementById('em1').addEventListener('click', e => { (e.target || e.srcElement).innerText = ''; }); document.getElementById('em2').addEventListener('click', e => { (e.target || e.srcElement).innerText = ''; }); document.getElementById('em3').addEventListener('click', e => { (e.target || e.srcElement).innerText = ''; }); * { vertical-align: middle; } div { background-color: yellow; } em { background-color: pink; cursor: pointer; font-size: 41px; } #em2::after, #em3::after { content: url(data:image/svg+xml,%3Csvg%20width%3D%22110%22%20height%3D%2246%22%20viewBox%3D%220%200%20110%2046%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23f00%3Bstroke-width%3A0%22%20d%3D%22M%200%2C0%20H%20110%20V%2046%20H%200%20Z%22%20%2F%3E%3C%2Fsvg%3E); vertical-align: text-bottom; height: 46px; display: inline-block; } <div> <em id="em1">text #1</em><svg width="110" height="46" viewBox="0 0 110 46" version="1.1" xmlns="http://www.w3.org/2000/svg"><path style="fill:#f00;stroke-width:0" d="M 0,0 H 110 V 46 H 0 Z" /></svg> </div> <hr> <div> <em id="em2">text #2</em> </div> <hr> <div> <em id="em3">text #3</em> </div>
·
Juan Pablo Isaza
Report
Answer question