We help IT Professionals succeed at work.
Get Started

Problem with ::after pseudo-element

140 Views
Last Modified: 2020-02-07
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

Comment
Watch Question
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE