#css #css-transitions #pseudo-element
Вопрос:
В приведенном ниже коде содержимое внутри элемента должно масштабироваться при наведении (масштабирование по вертикали), но прикрепленный псевдоэлемент с абсолютным расположением (*) должен оставаться на одном и том же месте без какого-либо масштабирования. Я кодирую символ*, к сожалению, масштабируется и изменяет его положение. Примечание: Хотя я не могу изменить разметку HTML, я могу свободно определять CSS.
table { margin: 3rem; } td { position: relative; } span { display: inline-block; } td div span::before { position: absolute; content: '*'; top: -1rem; left: -4rem; right: -4rem; text-align: center; font-size: 80%; } div { padding: 1rem; background: lightgreen; } div:hover span { transform: scale(2.6); } lt;tablegt; lt;trgt; lt;tdgt; lt;divgt;lt;spangt;1lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;2lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;3lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;4lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;5lt;/spangt;lt;/divgt; lt;/tdgt; lt;/trgt; lt;/tablegt; Ответ №1:
Прикрепите ::before к div вместо промежутка:
table { margin: 3rem; } td { position: relative; } span { display: inline-block; } td div::before { position: absolute; content: '*'; top: -1rem; left: -4rem; right: -4rem; text-align: center; font-size: 80%; } div { padding: 1rem; background: lightgreen; } div:hover span { transform: scale(2.6); } lt;tablegt; lt;trgt; lt;tdgt; lt;divgt;lt;spangt;1lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;2lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;3lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;4lt;/spangt;lt;/divgt; lt;/tdgt; lt;tdgt; lt;divgt;lt;spangt;5lt;/spangt;lt;/divgt; lt;/tdgt; lt;/trgt; lt;/tablegt;