Avatar of Daniele Brunengo
Daniele Brunengo
Flag for Italy asked on

Problem with ::after pseudo-element

Hello, I've found a behaviour of the ::after pseudo-element which I find strange and I'd like to ask you guys if there's an explanation and, most of all, a work-around.

Take a look here:
http://vetrina.ilgufoblu.net/test/

The two buttons are almost identical with completely identical css, but they behave differently on hover because the button on the left has an invisible span tag inside it which somehow makes the ::after pseudo-element position itself below the text instead of right after the text.

I don't understand how this is possible. The span has a "display: none;" attribute set and should not influence the layout in any way, as I understand it.

But it does, and the question I'm asking myself (and you) is why, and is there a way to avoid this?
I need that span (and more, actually) to be there to use some JS code which needs said spans to be right there (not included here because the problem is only with css).

I'll add the relevant code below, you can also check it out via your browser's dev tools.

Thanks.

HTML:
<body>
<div style="clear:both;padding:20px 0px 0px 200px;">
	<a title="Aggiungi al calendario" class="addeventatc" data-styling="none">
	    Sul Calendario
	    <span class="timezone">Europe/Rome</span>
	</a>
	<a title="Aggiungi al calendario" class="addeventatc" data-styling="none">
	    Sul Calendario
	</a>
</div>
</body>

Open in new window


CSS:
.addeventatc {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgb(138, 178, 211);
	background-image: none;
	background-origin: padding-box;
	background-position: 50% 50%;
	background-position-x: 50%;
	background-position-y: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
	box-shadow: rgba(138, 178, 211, 0.3) 0px 12px 18px -6px;
	box-sizing: border-box;
	color: rgb(255, 255, 255);
	cursor: pointer;
	display: inline-block;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 5px;
	line-height: 20.4px;
	margin-bottom: 0;
	outline-color: 0;
	padding-bottom: 20px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition-delay: 0s;
	transition-duration: 0.3s;
	transition-property: all;
	transition-timing-function: ease;
	vertical-align: baseline;
}

.addeventatc::after {
	font-size: 1.6em;
	transition: all 300ms ease 0ms;
	line-height: 1em;
	content: ">";
	opacity: 0;
	position: absolute;
	margin-left: -1em;
	text-transform: none;
	font-family: ETmodules !important;
	color: #ffffff !important;
	letter-spacing: 5px;
	text-align: center;
	font-feature-settings: "kern" off;
	font-variant: none;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
}

.addeventatc:hover::after {
	opacity: 1;
	margin-left: 0;
}

.addeventatc .timezone {
	display: none;
}

Open in new window

CSSHTMLWeb DevelopmentWeb Languages and Standards

Avatar of undefined
Last Comment
Daniele Brunengo

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Ryan Chong

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Daniele Brunengo

ASKER
Worked great!
Easier than I thought, but I still don't get why.
If an element is set to "display: none;", shouldn't it have NO impact on the layout whatsoever?
The inline-block value was set to both buttons, after all.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy