troubleshooting Question

Problem with ::after pseudo-element

Avatar of Daniele Brunengo
Daniele BrunengoFlag for Italy asked on
CSSHTMLWeb DevelopmentWeb Languages and Standards
2 Comments1 Solution148 ViewsLast Modified:
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>

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;
}
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros